8 крутых HTML-эффектов, которые каждый может добавить на свои сайты

17 ноября, 2020 Дядя Влад

Вы хотите, чтобы ваш сайт выглядел великолепно, но вам не хватает навыков веб-разработки.

Не отчаивайтесь! Вам не нужно знать CSS или PHP, чтобы создать красивый сайт с классными эффектами. Подойдет несколько простых HTML-тегов и умение копировать и вставлять.

Чтобы вы начали работать с классными HTML-эффектами, мы собрали эти бесплатные шаблоны кода HTML-эффектов. Они улучшат функциональность и удобство использования вашего сайта, не нарушая при этом больших затрат. Хотя это в основном HTML, эти классные коды могут также содержать некоторые CSS и PHP.

1. Классный эффект параллакса с HTML

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

В качестве альтернативы, возможно, фоновое изображение меняется при посещении разных частей сайта. Это классный эффект, который добавляет визуальной глубины контенту и идеально подходит, даже если вы не понимаете базовый HTML-код .

Вы можете поиграть с эффектом и скопировать код для простого эффекта прокрутки Parallax из W3Schools .

В самой сложной версии этот эффект представляет собой комбинацию HTML, CSS и JS.

Идите вперед и получите коды для вышеуказанного эффекта параллакса верхнего / нижнего колонтитула с CodePen .

2. Код прокручиваемого окна комментариев HTML

Это простой, но полезный элемент HTML, позволяющий упаковать длинные фрагменты текста в компактный формат. Таким образом, он не займет все место на странице.

Вы можете поиграть с цветами и размером текстового поля, чтобы оно соответствовало вашим потребностям.

Вход:

 <div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">
 Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :)</div>

Если вам нужно что-то более интересное, вы также можете получить код для настраиваемого поля комментариев из Quackit .

Они предлагают несколько шаблонов, но вы также можете использовать их редактор, чтобы вручную изменить и протестировать (запустить) свой собственный код.

3. Классный трюк с HTML: выделенный текст

С помощью простого тега HTML <span> вы можете добавить к тексту или изображениям массу интересных эффектов. Обратите внимание, что не все из них работают в разных браузерах. Упомянутые здесь работают в Google Chrome, Microsoft Edge и Mozilla Firefox.

Этот текстовый эффект HTML выделяет текст между тегами <span>.

Вход:

 <span style="background-color: #FFFF00>Your highlighted text here.</span>

Выходная демонстрация:

4. Добавить фоновое изображение к тексту

Точно так же вы можете изменить цвет текста или добавить фоновое изображение. Этот вариант отлично смотрится, если размер шрифта текста больше.

Вход:

 <span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">  presents...</span>

Тот же эффект достигается путем добавления элементов стиля и шрифта к тексту в теге <strong>.

Выходная демонстрация:

Всплывающая подсказка заголовка появляется, когда вы прокручиваете мышью фрагмент «измененного» текста или изображения. Вы видели, как они используются на веб-сайтах в изображениях, связанном тексте или даже в пунктах меню в настольных приложениях. Используйте этот HTML-код, чтобы добавить всплывающую подсказку к обычному тексту на вашей веб-странице.

Вход:

 <span title="See, this is the tooltip. :)">Move your mouse over me!</span>

Выходная демонстрация:

6. Самые крутые HTML-трюки: прокрутка или падение текста.

При поиске в Google «marquee html» вы обнаружите маленькое пасхальное яйцо. Видите вверху счетчик результатов поиска с прокруткой? Это эффект, созданный теперь устаревшим тегом marquee. Хотя этот некогда крутой текстовый эффект HTML устарел, большинство браузеров по-прежнему его поддерживают.

Вход:

 <marquee>I wanna scroll with it, baby!</marquee>

Выходная демонстрация:

Вы можете добавить дополнительные атрибуты для управления поведением прокрутки, цветом фона, направлением, высотой и т. Д. Однако будьте осторожны; при чрезмерном использовании эти эффекты могут вызвать сильное раздражение.

Чтобы создать крутой эффект падающего текста, снова зайдите в Quackit и скопируйте их тщательно настроенный код выделения .

7. Создайте классное меню переключения с помощью HTML.

Самые крутые приемы HTML – это динамические HTML-эффекты. Однако они часто основаны на сценариях. Вот один эффект для меню, который, согласитесь, выглядит очень красиво.

Это немного сложнее, чем обычный HTML-тег, потому что он работает с таблицей стилей и скриптами. Преимущество состоит в том, что вам не нужно загружать файл CSS или скрипта, чтобы он работал. Вместо этого просто вставьте следующий код в раздел <head> вашего веб-сайта.

Вход:

 <style type="text/css">
 .menutitle{
 cursor:pointer;
 margin-bottom: 5px;
 background-color:#ECECFF;
 color:#000000;
 width:140px;
 padding:2px;
 text-align:center;
 font-weight:bold;
 /*/*/border:1px solid #000000;/* */
 }.submenu{
 margin-bottom: 0.5em;
 }
 </style><script type="text/javascript">/***********************************************
 * Switch Menu script- by Martial B of http://getElementById.com/
 * Modified by Dynamic Drive for format & NS4/IE4 compatibility
 * Visit http://www.dynamicdrive.com/ for full source code
 ***********************************************/var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
 var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page onlyif (document.getElementById){ //DynamicDrive.com change
 document.write('<style type="text/css">n')
 document.write('.submenu{display: none;}n')
 document.write('</style>n')
 }function SwitchMenu(obj){
 if(document.getElementById){
 var el = document.getElementById(obj);
 var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
 if(el.style.display != "block"){ //DynamicDrive.com change
 for (var i=0; i<ar.length; i++){
 if (ar[i].className=="submenu") //DynamicDrive.com change
 ar[i].style.display = "none";
 }
 el.style.display = "block";
 }else{
 el.style.display = "none";
 }
 }
 }function get_cookie(Name) {
 var search = Name + "="
 var returnvalue = "";
 if (document.cookie.length > 0) {
 offset = document.cookie.indexOf(search)
 if (offset != -1) {
 offset += search.length
 end = document.cookie.indexOf(";", offset);
 if (end == -1) end = document.cookie.length;
 returnvalue=unescape(document.cookie.substring(offset, end))
 }
 }
 return returnvalue;
 }function onloadfunction(){
 if (persistmenu=="yes"){
 var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
 var cookievalue=get_cookie(cookiename)
 if (cookievalue!="")
 document.getElementById(cookievalue).style.display="block"
 }
 }function savemenustate(){
 var inc=1, blockid=""
 while (document.getElementById("sub"+inc)){
 if (document.getElementById("sub"+inc).style.display=="block"){
 blockid="sub"+inc
 break
 }
 inc++
 }
 var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
 var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
 document.cookie=cookiename+"="+cookievalue
 }if (window.addEventListener)
 window.addEventListener("load", onloadfunction, false)
 else if (window.attachEvent)
 window.attachEvent("onload", onloadfunction)
 else if (document.getElementById)
 window.onload=onloadfunctionif (persistmenu=="yes" && document.getElementById)
 window.onunload=savemenustate</script>
 And this code goes wherever you want the dynamic menu to appear.
 <!-- Keep all menus within masterdiv-->
 <div id="masterdiv"><div onclick="SwitchMenu('sub1')">Topics</div>
 <span id="sub1">
 - <a href="https://www.makeuseof.com/service/browser">Browsers/Addons</a><br>
 - <a href="https://www.makeuseof.com/service/web_based">Web Apps</a><br>
 - <a href="https://www.makeuseof.com/service/how-to">How-To Tips</a><br>
 - <a href="https://www.makeuseof.com/service/applications">Cool Software</a><br>
 ...and more!
 </span><div onclick="SwitchMenu('sub2')">Staff Writers</div>
 <span id="sub2">
 - <a href="https://www.makeuseof.com/tag/author/karl-l-gechlik/">Karl Gechlik</a><br>
 - <a href="https://www.makeuseof.com/tag/author/tinsie/">Tina</a><br>
 - <a href="https://www.makeuseof.com/tag/author/varunkashyap/">Varun Kashyap</a><br>
 ...and more!
 </span><div onclick="SwitchMenu('sub3')">Miscellaneous</div>
 <span id="sub3">
 - <a href="https://www.makeuseof.com/about/">About</a><br>
 - <a href="https://www.makeuseof.com/contact">Contact</a><br>
 - <a href="https://www.makeuseof.com/archives-2">Archives</a><br>
 - <a href="https://www.makeuseof.com/disclaimer">Disclaimer</a><br>
 </span></div>

Выходная демонстрация:

К сожалению, мы не можем здесь продемонстрировать этот эффект. Но исходный источник, Dynamic Drive , содержит рабочую копию этого динамического HTML-эффекта.

8. Получите электронную таблицу HTML с помощью Tableizer.

Если вы хотите отображать электронную таблицу на своем сайте, позвольте Tableizer! преобразовать ваши данные в таблицу HTML. Просто вставьте необработанные данные из Excel, Google Doc или любой другой электронной таблицы в инструмент конвертера на tableizer.journalistopia.com . Настройте параметры таблицы , затем нажмите « Табличить», чтобы получить вывод HTML.

Это, пожалуй, один из самых крутых HTML-кодов для вашего сайта, как Tableize It! делает всю тяжелую работу.

Щелкните Копировать HTML в буфер обмена, чтобы скопировать HTML-код и добавить его на свой веб-сайт. Попробуйте отредактировать цвета фона, чтобы он выглядел намного круче.

Хотя это не совсем HTML-эффект, но он весьма удобен.

Еще больше интересных HTML-кодов и эффектов для вашего сайта

Возможности HTML, CSS и JavaScript предлагают потенциально неограниченные возможности для потрясающих эффектов на вашем веб-сайте. Хочу больше?

HTML Goodies дает вам отличные идеи для тегов <span>.
Dynamic Drive имеет множество невероятных динамических сценариев HTML.
Quackit предлагает отличный HTML-код.

Мы показали вам восемь интересных HTML-кодов, которые вы можете скопировать для улучшения своего сайта. Несмотря на то, что они разные, их все легко реализовать, если вы знаете основные методы кодирования HTML.

истокс клуб

8 крутых HTML-эффектов, которые каждый может добавить на свои сайты

1. Классный эффект параллакса с HTML

2. Код прокручиваемого окна комментариев HTML

3. Классный трюк с HTML: выделенный текст

4. Добавить фоновое изображение к тексту

5. Полезный трюк с HTML для добавления подсказки к заголовку

6. Самые крутые HTML-трюки: прокрутка или падение текста.

7. Создайте классное меню переключения с помощью HTML.

8. Получите электронную таблицу HTML с помощью Tableizer.

Еще больше интересных HTML-кодов и эффектов для вашего сайта