MOUNT
MENU
EXP 2021.03
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
There is no design without discipline. There is no discipline without intelligence.
1
Second block animation
Good design is obvious. Great design is transparent. The work you do while you procrastinate is probably the work you should be doing for the rest of your life. Design creates culture. Culture shapes values. Values determine the future. Everything should be made as simple as possible, but not simpler.
LET'S GO!
Design
EXE 21.01
When plant life had conquered the Earth, the animals least affected had been those of the sea. Theirs was an environment less susceptible to change than land
TEMPLATE 0.38
LEARN MORE
Design
Good design is obvious. Great design is transparent.
LEARN MORE
Design
Good design is obvious. Great design is transparent.
The new monster seaweeds had proved expert at catching crabs, at wrapping them in a greedy frond as they scuttled over the ocean bed, or at trapping them beneath stones at that vulnerable time when the crabs were growing new shells. In a few million years, the brachyura were all but extinct.
Как сделать
.pl {
display: block;
width: 9.375em;
height: 9.375em;
}
.pl__arrows,
.pl__ring-rotate,
.pl__ring-stroke,
.pl__tick {
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.pl__arrows {
animation-name: arrows42;
transform: rotate(45deg);
transform-origin: 16px 52px;
}
.pl__ring-rotate,
.pl__ring-stroke {
transform-origin: 80px 80px;
}
.pl__ring-rotate {
animation-name: ringRotate42;
}
.pl__ring-stroke {
animation-name: ringStroke42;
transform: rotate(-45deg);
}
.pl__tick {
animation-name: tick42;
}
.pl__tick:nth-child(2) {
animation-delay: -1.75s;
}
.pl__tick:nth-child(3) {
animation-delay: -1.5s;
}
.pl__tick:nth-child(4) {
animation-delay: -1.25s;
}
.pl__tick:nth-child(5) {
animation-delay: -1s;
}
.pl__tick:nth-child(6) {
animation-delay: -0.75s;
}
.pl__tick:nth-child(7) {
animation-delay: -0.5s;
}
.pl__tick:nth-child(8) {
animation-delay: -0.25s;
}
/* Animations */
@keyframes arrows42 {
from {
transform: rotate(45deg);
}
to {
transform: rotate(405deg);
}
}
@keyframes ringRotate42 {
from {
transform: rotate(0);
}
to {
transform: rotate(720deg);
}
}
@keyframes ringStroke42 {
from,
to {
stroke-dashoffset: 452;
transform: rotate(-45deg);
}
50% {
stroke-dashoffset: 169.5;
transform: rotate(-180deg);
}
}
@keyframes tick42 {
from,
3%,
47%,
to {
stroke-dashoffset: -12;
}
14%,
36% {
stroke-dashoffset: 0;
}
}
Если картинка на главном перекрывает текст, то все элементы нужно вначале заанимировать.
В шаблоне все все настройки рабочие, сохраняем и применяем.
В шаблоне все все настройки рабочие, сохраняем и применяем.
Добавляем изображение в шейп
1. Добавили шейп в Zero блоке.
2. Перевели его в window container и сделали 100% высоты и ширины
3. Анимируем шейп по скроллу, со сдвигом на 1000+px и дистанцией +-800px
2. Перевели его в window container и сделали 100% высоты и ширины
3. Анимируем шейп по скроллу, со сдвигом на 1000+px и дистанцией +-800px
ID шаблона
21920188
Как добавить шаблон
Создаем новую страницу на сайте
Скроллим в самый низ
Добавляем нужный id шаблона