Oleg Scretch-1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Добавление элементу класса или ид при клике на другой элемент | |
| // Документация http://codepen.io/michaelkaeser/pen/yAKvn | |
| $(document).ready(function() { | |
| $('.toggle').on('click',function(){ | |
| $('.fades').toggleClass('one'); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Плавное появление, исчезание блока | |
| // Документация http://www.w3schools.com/jquery/jquery_fade.asp | |
| // <button>Открыть блок</button><br><br> | |
| // <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> | |
| $(document).ready(function(){ | |
| $("button").click(function(){ | |
| $("#div1").fadeToggle(); | |
| // Вариации: | |
| // $("#div2").fadeToggle("slow"); | |
| // $("#div3").fadeToggle(3000); |
Scretch-1
/ _custom.scss
Last active
February 22, 2018 10:49
.container для фиксированной вёрстки (по аналогии с .container из бутстрапа)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // добавляем в _base.sass, _base.scss | |
| .containers | |
| width: $length | |
| margin-right: auto | |
| margin-left: auto | |
| padding-left: 15px | |
| padding-right: 15px | |
| &:before | |
| content: " " |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Прижатый к низу футер | |
| // После подключения нужно добавить id="footer" контейнеру footer | |
| html { | |
| position: relative; | |
| min-height: 100%; | |
| } | |
| body { | |
| margin-bottom: 70px; | |
| } | |
| #footer { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Добавление класса при наведении, при клике присваивает класс (mouseenter (.addClass)) при повторном клике убирает класс (mouseleave(.removeClass)) | |
| //Пример: <div class="test">test div</div> | |
| //Документация: http://api.jquery.com/on/ | |
| $( "div.test" ).on({ | |
| click: function() { | |
| $( this ).toggleClass( "activation" 50 ); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Добавление стилей при наведении, изменение стилей при отведении. | |
| //Пример:<p>Move the mouse over a paragraph.</p> <p>Like this one or the one above.</p> | |
| //Документация http://api.jquery.com/css/ | |
| $( "p" ) | |
| .on( "mouseenter", function() { | |
| $( this ).css({ | |
| "background-color": "yellow", | |
| "font-weight": "bolder" | |
| }); | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Документация http://codepen.io/markhillard/pen/Pwaqdb | |
| //--HTML--// | |
| <div class="wrap-drop" id="noble-gases"> | |
| <span>All Noble Gases</span> | |
| <ul class="drop"> | |
| <li class="selected"><a>All Noble Gases</a></li> | |
| <li><a>Helium</a></li> | |
| <li><a>Neon</a></li> | |
| </ul> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //--HTML--// | |
| <select name="sources" id="sources" class="custom-select sources"> | |
| <option value="profile">Profile</option> | |
| <option value="word">Word</option> | |
| <option value="hashtag">Hashtag</option> | |
| </select> | |
| //--end HTML--// | |
| //--CSS--// | |
| // drop-select |
Scretch-1
/ ul_font_Awesome
Last active
February 24, 2016 13:54
jQ Выпадающий список (ul) с возможностью выбора (custom, Font Awesome)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //--HTML--// | |
| <div class="select"> | |
| <span class="placeholder">Select your language</span> | |
| <ul> | |
| <li>España- Español</li> | |
| <li>United States - English</li> | |
| <li>France - Français</li> | |
| <li>Deutschland - Deutsch</li> | |
| </ul> | |
| </div> |
Scretch-1
/ amimation_blocks_plugin
Last active
December 17, 2020 20:01
Анимация блоков при скролле страницы
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Для начала подключаем animate_plugin | |
| //Далее подключаем плагин waypoints https://github.com/imakewebthings/waypoints | |
| //Далее на странице подключаем "animate" стили в | |
| <head> | |
| <link rel="stylesheet" href="libs/animate-plugin/animate.min.css"> | |
| </head> | |
| //После в самом низу тега | |
| <body> | |
| <script type="text/javascript" src="libs/animate-plugin/animate-css.js"></script> | |
| <script type="text/javascript" src="libs/animate-plugin/jquery.waypoints.min.js"></script> |
OlderNewer