Скажите пожалуйста,как сделать такую JS шторку?

Question

[Игорь]

welovepavel.esy.es/kivi/HTML.html

https://qiwi.ru

скрины:



1.как задать ей такую форму?
1.1 когда вы наводите курсор мыши на эту стрелочку то там как будто картинка в общем нажимать удобно потому что целиться не надо там широкая область или что,как такое сделать?

2.Как это написать?


3.как задать такую форму после нажатия?

4.
.textj1 {
margin-left: 40%;
margin-top: 100px;
color: #fff;
position: absolute;
max-height: 0;
}

5.Как называются такие изображения,где их можно нарисовать ,можно ссылку на ютюб как их рисуют?

Спасибо большое за Ваш ответ!

Comments

[Дмитрий Кравченко]

это полный трэш. как разместить текст - серьезно?

[Игорь]

Дмитрий Кравченко: написать в h ,p бес проблем ,но вы обратите внимание что у меня сейчас на сайте этот текст виден,а нужно чтобы он отображался после того как Вы откроете шторку.Как это прописать?

[Дмитрий Кравченко]

.hidden-content{
max-height: 0;
}
.opened .hidden.content{
max-height: 1000px;
}

[Игорь]

Дмитрий Кравченко:
.opened .hidden.content{
max-height: 1000px;

а это что делает?

welovepavel.esy.es/kivi/HTML.html

вроде и без max-height: 1000px; работает

[Дмитрий Кравченко]

Игорь: можно будет задать в css transform на max-height и не писать .animate в js

Answer 1

[DenJel]

1) картинка в png
1.1) width 100%
2) onclick css top 0
3) onclick change bg
4) просто написать в тегах p и отстилизовать
5) svg или canvas
если Вам непонятно, что я написал, то просто закажите, все равно сами только через недели 3 сделаете, а такую скучную, но довольно громоздкую задачу Вам вряд ли кто здесь напишет

Comments

[DenJel]

Игорь: htmlbook.ru

[Игорь]

4.каким образом его отстилизовать чтобы текст был виден после того как откроют шторку?Можете ссылку дать?

[DenJel]

Игорь: вам надо свойства font-size color font-family line-height так же узнать что такое позиционирование элементов

[Игорь]

DenJel: я знаю это,размер шрифта,шрифт страницы,расстояние между строками,и позиционирование знаю

[Игорь]

DenJel: так как мне внутри шторки заключить эти слова?
stroytech.pe.hu
этот сайт я написал,и там не было анимаици поэтому сейчас что я делаю это новый опыт.
помогите пожалуйста,если можете.

[Stalker_RED]

Игорь: как-то так <div class="торка">слова заключенные внутри</div>

[DenJel]

Игорь: ппц если вы все знаете по верстке, где у вас сложность то возникает?? Верстаете блок в position absolute, даете ему top -сколько то пикселей, а потом вешаете одну строчку кода jquery чтоб она при клике top в 0 возвращала задаете css transition для красоты и все готово, помочь к сожалению не могу так как на работе

[DenJel]

Игорь: Сверстайте нормально на своем сайте этот блок я вам javascript кину после работы.

[Игорь]

DenJel: а зачем JS ?
welovepavel.esy.es/kivi/HTML.html

вроде и без него работает.

[DenJel]

Игорь: без JS вы не обработаете событие клика

[Игорь]

DenJel: то есть?
Шторка же корректно работает.

2.Зачем мне это событие клика?

[Stalker_RED]

Игорь: по вашему это не js? i.imgur.com/jEwGrUf.png

[Игорь]

Stalker_RED: так я подумал ещё что то нужно к нему добавить,вот и удивился,зачем?
работает же)

[Stalker_RED]

Игорь: Если все работает и вы всё знаете, может расскажете тогда, в чем смысл всего этого вопроса на тостере?

[Игорь]

1.картинка в PNG?
как она вставлена?
вижу что по всей ширине эта синяя строка кликабельна,они разместили картинку шириной 100 px height50px но задали ей зону кликабельности 1000px?

[Игорь]

DenJel: 1.картинка в PNG?
как она вставлена?
вижу что по всей ширине эта синяя строка кликабельна,они разместили картинку шириной 100 px height50px но задали ей зону кликабельности 1000px?
https://qiwi.ru/