Форум

spo · #1 (**permalink**) 02.10.2015, 00:26

Возникла необычная задача. И я не представляю возможно ли вообще сделать такое. Прошу подсказать.

Сайт представляет из себя одну страницу, которая содержит два раздела (контейнера), между которыми осуществляется переключение.

По умолчанию на экране отображается часть одного раздела и часть другого, в виде треугольников, прислоненных друг к другу диагоналями:

При наведении на один из треугольников, другой должен смещаться до полного исчезновения, раскрывая содержимое первого:

и наоборот:

caetus · #2 (**permalink**) 02.10.2015, 00:59

реально ! только это все делается на CSS http://htmlbook.ru/blog/treugolniki-cherez-css

spo · #3 (**permalink**) 02.10.2015, 03:20

Сообщение от caetus

реально ! только это все делается на CSS http://htmlbook.ru/blog/treugolniki-cherez-css

Вы точно обратили внимание на содержимое поста?
Вопрос остается открытым.

tsigel · #4 (**permalink**) 02.10.2015, 09:47

spo,
как вариант: 2 картинки одна под другой. Отрисовать на канвасе или svg и анимированно затирать/рисовать картинку сверху.

как вариант: на css тоже можно сделать, caetus, все правильно сказал. Только понадобится куча вспомогательных элементов

spo · #5 (**permalink**) 02.10.2015, 14:52

Сообщение от tsigel

spo,
как вариант: 2 картинки одна под другой. Отрисовать на канвасе или svg и анимированно затирать/рисовать картинку сверху.

как вариант: на css тоже можно сделать, caetus, все правильно сказал. Только понадобится куча вспомогательных элементов

Я такое не то что на canvas или svg, но даже в фотошоп при помощи слоев и маск не отображу. Возможно я ошибаюсь, но мне кажется вы не до конца понимаете задачу.

Вы написали 2 картинки одна под другой, что в принципе противоречит условию. Если одна A под другой B, то при смещении B будет появляться A - все правильно, но при смещении A не будет появляться Б.

caetus написал не читая и привел ссылку не по теме.

А ваша идея с затиранием и отрисовыванием это хоть чтото, но я так и не могу понять как будет происходить отрисовывание контента который отображается под каждым из треугольников.

caetus · #6 (**permalink**) 03.10.2015, 06:36

сделаешь дальше сам если не можешь то работа в другом разделе!

<style>
.wrap {
    position: relative;
    margin: 100px;
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    overflow: hidden;
}
.wrap div {
    position: absolute;
    width: 110%;
    height: 100%;
}
.wrap div span {
    position: absolute;
    font-size: 2em;
}
.wrap div:nth-child(1) {
    transform-origin: 0 0;
    transform: rotate(25deg);
    background: #ccc;
} 
.wrap div:nth-child(2) {
    right: 0;
    transform-origin: 100% 100%;
    transform: rotate(25deg);
    background: #036;
} 
.wrap div:nth-child(1) span {
    top: 25%;
    left: 25%;
    transform: rotate(-25deg);
    color: #036;
}
.wrap div:nth-child(2) span {
    top: 55%;
    right: 25%;
    transform: rotate(-25deg);
    color: #fff;
}
</style>

<body>
<div class="wrap">
    <div><span>Hello</span></div>
    <div><span>World</span></div>
</div>
</body>

spo · #7 (**permalink**) 03.10.2015, 14:35

Сообщение от caetus

сделаешь дальше сам если не можешь то работа в другом разделе!

С задачей справился.
А твоя подсказка из разряда "попробуй html+css".

Форум

Справочник

Discord чат

Курсы javascript