Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π³ΡΠ»ΡΡ ΠΏΠΎ ΠΏΡΠΎΡΡΠΎΡΠ°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΠΌΠ½Π΅ Π²ΡΡΡΠ΅ΡΠΈΠ»Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ»ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² SVG ΠΈ JS, ΠΈ Ρ Π½Π΅ ΡΠΌΠΎΠ³ ΡΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΡΡΠΎΠ± Π½Π΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΌ ΠΎΠΊΠ½ΠΎΠΌ Ρ Π²Π°ΠΌΠΈ.
ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠ΅ Π½ΠΎ Π² ΡΠΎΠΆΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ΠΎΠ±ΡΠΊΠ½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, Π° Π³ΡΠ°ΡΠΈΠΊΠ° SVG Π² Π΄Π°Π½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΡΡΡΠ΅ΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π°Π±ΠΈΡΠ°Π΅Ρ ΠΎΠ±ΠΎΡΠΎΡΡ ΡΡΠ΅Π΄ΠΈ Π²Π΅Π± ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ. ΠΠ»ΡΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ»Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° IE9+.
ΠΡ ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠ΅ΠΌ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ SVG ΠΈ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° ΠΌΡ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΡΠ΅ΠΉ SVG, ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΡΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΈΠ»ΡΠ½ΡΠΉ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°.
ΠΠ»Ρ ΡΠ΅Π³ΠΎ Π½ΡΠΆΠ΅Π½ ΡΠΊΡΠΈΠΏΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΡΠΏΡΠΎΡΠΈΡΠ΅ ΠΡ? - ΠΡ ΠΊΠ°ΠΊ ΠΆΠ΅! ΠΡ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° Π½Π΅ ΡΠ°Π· Π²ΠΈΠ΄Π΅Π»ΠΈ ΠΊΠ°ΠΊ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ°ΠΉΡΠ°Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΎΠΊΠ½Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ, ΠΊΡΠΎ ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΎΠΊΠ½Π° Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ± ΠΏΡΠΈΠ½ΡΡΡ Π·Π°ΡΠ²ΠΊΡ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ Π»ΠΈΠ±ΠΎ Π·Π°ΠΊΠ°Π· Π½Π° ΡΠ°ΠΉΡΠ΅, ΠΊΠΎΠΌΡ ΡΠΎ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΡΠ»ΡΠΆΠΈΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠΊΡΡΡΡ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎ Π³ΡΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΌΠΎΠ΄ΡΠ»Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ± ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΊΠ°ΠΊΡΡ ΡΠΎ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΎΠ±ΡΠΈΠΌ ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ ΠΎΠΊΠΎΠ½ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° ΡΠ²ΠΎΡ, Π½ΠΎ ΠΎΠ½ΠΈ ΠΎΡΠ΅Π½Ρ Π²ΠΎΡΡΡΠ΅Π±ΠΎΠ²Π°Π½Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠ°ΠΉΡΠ΅.
Π― ΡΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΡΠΎ ΠΏΠΈΡΠ°Π» ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠ°ΡΡΠ΅ΠΉ Π½Π° ΡΠ΅ΠΌΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΎΠΊΠΎΠ½ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ Π·Π΄Π΅ΡΡ, Π½ΠΎ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΠΈΠ·ΡΡΠΈΠΌ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ°, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΊΠΎΠ½ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ Π΅ΠΌΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΏΠ»Π°Π²Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
ΠΠ°ΠΊ Π²ΡΠ΅Π³Π΄Π° ΡΠΊΠ°ΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΠΎΠ΄ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ΠΉ, ΡΠ°ΠΌ ΠΆΠ΅ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½ΠΎ Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ΅ΠΉΡΠ°Ρ ΠΈ ΠΈΠ·ΡΡΠΈΠΌ. ΠΡ ΡΡΠΎ ΠΆΠ΅ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΌΡ ΠΎΡΡΡΡΠΏΠΈΠΌ ΠΎΡ ΡΠ΅ΠΎΡΠΈΠΈ ΠΈ ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ ΠΊ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ°Π³ Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΡ Π½Π°ΡΠ½Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° ΡΡΠΎ Π±ΡΠ΄Π΅ HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡΡ ΡΡΡΡΠΊΡΡΡΡ, ΠΈ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄Π²ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <section>, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π΄Π»Ρ ΠΎΠ±Π΅ΡΡΠΊΠΈ ΡΠ°ΠΌΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ #modal-trigger, Π±Π»ΠΎΠΊ div.cd-modal ΡΠΎ Π΅ΡΡΡ ΡΠ°ΠΌΠΎ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° .cd-modal-content ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°, Π½Ρ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΡΠΎ div.cd-svg-bg, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠΊΡΡΡΠΈΡ ΡΠΎΠ½Π°.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<main class="cd-main-content"> <section class="center"> <h1>SVG ΠΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ</h1> <a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">ΠΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°</a> </section> </main> <!-- .cd-main-content --> <div class="cd-modal" data-modal="modal-trigger"> <div class="cd-svg-bg" data-step1="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z" data-step2="M33.8,690l-188.2-300.3c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1L959.6,110c0.1,0.1,0,0.3-0.1,0.3 L34.1,690.1C34,690.2,33.9,690.1,33.8,690z" data-step3="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z" data-step4="M-329.3,504.3l-272.5-435c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1l272.5,435c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-329,504.5-329.2,504.5-329.3,504.3z" data-step5="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z" data-step6="M476.4,1013.4L205,580.3c-0.1-0.1,0-0.3,0.1-0.3L1130.5,0.2c0.1-0.1,0.3,0,0.3,0.1l271.4,433.1c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C476.6,1013.6,476.5,1013.5,476.4,1013.4z"> <svg height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 800 500"> <title>SVG Modal background</title> <path id="cd-changing-path-1" d="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z"/> <path id="cd-changing-path-2" d="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z"/> <path id="cd-changing-path-3" d="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z"/> </svg> </div> <div class="cd-modal-content"> <!-- modal content here --> </div> <!-- cd-modal-content --> <a href="#0" class="modal-close">Close</a> </div> <!-- cd-modal --> <div class="cd-cover-layer"></div> <!-- .cd-cover-layer --> |
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΌ Π½Π°ΡΠΈΠΌ ΡΠ°Π³ΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π°, ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² .cd-modal visibility: hidden; position: fixed; height: 100%; ΠΈ width: 100%;,Π° ΠΏΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΡΠΎ Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° a#modal-trigger ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ ΠΎΠΊΠ½Π° ΠΈΠ· ΡΠΊΡΡΡΠΎΠ΅ Π½Π° Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ .modal-is-visible.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.cd-modal { position: fixed; z-index: 2; top: 0; left: 0; height: 100%; width: 100%; visibility: hidden; transition: visibility 0s 0.6s; } .cd-modal.modal-is-visible { visibility: visible; transition: visibility 0s 0s; } .cd-cover-layer { position: fixed; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background-color: #f2f2f2; visibility: hidden; opacity: 0; transition: opacity 0.3s 0.3s, visibility 0s 0.6s; } .cd-cover-layer.modal-is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s 0s, visibility 0s 0s; } .cd-modal-content { color: #f2f2f2; opacity: 0; transform: translateY(50px); transition: opacity 0.3s 0s, transform 0.3s 0s; } .modal-is-visible .cd-modal-content { opacity: 1; transform: translateY(0); transition: opacity 0.3s 0.3s, transform 0.3s 0.3s; } |
Π‘ΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈ, ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΡΠ°Π»ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠ½ΠΊΡ ΡΡΠΎ Π½Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ JS ΡΡΠΎΠ±Ρ Π½Π°ΡΠ΅ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
modalTrigger.on('click', function(event){ //modalTrigger = $('a[data-type="cd-modal-trigger"]') event.preventDefault(); $([modal.get(0), coverLayer.get(0)]).addClass('modal-is-visible'); //modal = $('.cd-modal'), coverLayer = $('.cd-cover-layer') animateModal(pathsArray, pathSteps, duration, 'open'); }); function animateModal(paths, pathSteps, duration, animationType) { var path1 = ( animationType == 'open' ) ? pathSteps[1] : pathSteps[0], // pathSteps[n] = $('.cd-svg-bg').data('step'+(n+1)); path2 = ( animationType == 'open' ) ? pathSteps[3] : pathSteps[2], path3 = ( animationType == 'open' ) ? pathSteps[5] : pathSteps[4]; paths[0].animate({'d': path1}, duration, firstCustomMinaAnimation); //paths[0] = Snap('#cd-changing-path-1') paths[1].animate({'d': path2}, duration, firstCustomMinaAnimation); //paths[1] = Snap('#cd-changing-path-2') paths[2].animate({'d': path3}, duration, firstCustomMinaAnimation); //paths[2] = Snap('#cd-changing-path-3') } |
ΠΠΎΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈ Π²ΡΠ΅, ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ ΡΠΎΡΠΌΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΏΠ΅ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ. Π§ΡΠΎ Π΅ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ Π½Π° Π·Π΄ΠΎΡΠΎΠ²ΡΠ΅, Π° Ρ Π±ΡΠ΄Ρ ΡΠ°Π΄ Π΅ΡΠ»ΠΈ Π΄Π°Π½Π½Π°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° ΠΊΠΎΠΌΡ ΡΠΎ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡ.
Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π½ΠΈΠΆΠ΅.
ΠΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈΠ½ΠΎΠ³Π΄Π° ΡΠΊΡΠΈΠΏΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΌΠΎΠΆΠ΅Ρ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ²Π°ΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠΊΡΠΈΠΏΡΠ°ΠΌΠΈ, ΠΊΠ°ΠΊ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠΌΠΎΡΡΠΈΡΠ΅:
Π² Π΄Π½Π΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Ρ Π²Π°Ρ Π·Π° ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠΊΡΠΈΠΏΡΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅:
Π° Π² ΡΠ°ΠΉΠ»Π΅ main.js Π²Π½ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎΡΡΠ°Π²ΠΈΠ² ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠ΅ΠΌΠΈ «$» Π±ΡΠΊΠ²Ρ «j» — ΡΠΎΠ³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ.