Падащи снежинки на сайта - как да направите ефекта на падащи снежинки с помощта на плъгин и скрипт,
Здравейте мили приятели! Въпреки че зимата свърши, все още искам да ви кажа как да създадете падащи снежинки на WordPress сайт, за да си спомните малко зимните дни :-). Ще направим падащи снежинки с помощта на скрипт и плъгин.
Тоест в тази статия ще анализираме два абсолютно работещи метода. Там сами ще прецените кой вариант предпочитате. И така, нека преминем към практическата част на урока.
Как да направите падащи снежинки на WordPress с плъгин?
И така, нека отидем в раздела Plugins – Add New и инсталирайте плъгина за падаща снежинка за WordPress.
Страхотен! Инсталирахме и активирахме плъгина. След това от лявата страна на вашия административен панел на WordPress ще се появи секция Super Snow.
Влизайки вътре, ще видите, че плъгинът е деактивиран и трябва да го активирате.
Сега ще разгледаме основните настройки.
Виртуален снегорин
В този раздел можете да зададете размера на падащите снежинки и техния брой, да добавите своя собствена версия на снежинки, да посочите в кой етикет да бъдат поставени. По подразбиране всичко е обвито в етикета body. Можете също да го отмените. Можете също така да зададете забавяне в секунди за падащи снежинки на сайта, ефекти.
Следващата последна опция е да показвате падащи снежинки на страници и публикации. Не забравяйте, че няма да има сняг на мобилни устройства, защото той просто е изключен там.
Например, можете да запалите падащи снежинки само на определени страници, като посочите това със специална функция (те са дадени на страницата)
Ето примери за функции:
! wp_is_mobile() && is_page ( 'christmas-promo' ) - ако тази страница не е мобилна, тогава се показва на страницата за коледна промоция
! wp_is_mobile() && ! is_ssl ( ) - не показва, ако това не е мобилно устройство и не е защитен протокол https и SSl
След всички направени действия и настройки кликваме върху „Запазване на промените“.
Ето какво приблизително получавате в браузъра.
Това доведе до големи, бавно падащи снежинки на тестов сайт на WordPress. Много сладък също.
Как да направите падащи снежинки на сайта чрез скрипт?
В горния пример направихме снежинки с помощта на плъгин. Може би това е добре, но всички знаем, че плъгините правят сайта по-тежък и по-бавен. За тези, които са свикнали да правят всичко чрез функции и код, предлагам да правят падащи снежинки чрез скрипт. Има много от тях в мрежата. Ще се съсредоточа върху най-простия вариант - Снежна буря.
Можете да изтеглите този скрипт точно тук - snowstorm.zip
Какво трябва да направите първо? Първата стъпка е да създадете директория с папки, където можете да поставите кода на вашия javascript ефект. Създадох папка Lib в корена на сайта и вече я качих.
Вътре в него не е необходимо да се създават повече папки, за да не се удължава пътя.
След това отиваме до шаблона за долен колонтитул на нашия сайт и до затварящия таг / тяло > Свързваме нашия скрипт с този ред:
За по-голяма яснота ще покажа къде съм го вмъкнал:
Не забравяйте да запазите всички промени и това е, което трябва да получите на сайта:
Сега можете да „играете“ с нашите снежинки на сайта, тоест да зададете тяхната скорост, размер, брой на самите снежинки и други параметри. За да направим това, трябва да направим малки промени в скрипта.
Поставете следния кодпо-долу в областта на долния колонтитул:
В шаблона всичко ще изглежда така:
Сега да видим какво се случи в браузъра:
Както виждаме, нашите снежинки на сайта са придобили мек синкав цвят, просто истински снеговалеж на сайта се оказа 🙂
Други настройки на скрипта за снежинка
За да "изопача" сценария още повече, ще разгледам други опции.
снежна буря. autoStart = вярно; - избор между това дали сняг ще се появява автоматично при зареждане на страницата или не.
снежна буря. animationInterval = 33; - измерване на интервала от милисекунди на кадър. При стойност = 20 е бързо и гладко, но ще натовари процесора. Ако поставите = 50, тогава е по-консервативно, но по-бавно.
снежна буря. flakeBottom = нула; - ограничаване на залепването на сняг в долната част на страницата. Ако не е посочено, тогава снегът просто ще залепне в долната част на страницата на сайта и ще изчезне с превъртане или превъртане.
снежна буря. flakesMax = 128; - задаване на стойността на максималния брой снежинки, падащи във всяка част на страницата за единица време.
снежна буря. flakesMaxActive = 64; - задава лимита за падащи снежинки (т.е. движещи се по екрана и считани за активни).
снежна буря. следване на мишката = вярно; - позволява на снега да се движи на сайта с "вятър" по отношение на движението на мишката по оста X (ляво / дясно).
снежна буря. freezeOnBlur = вярно; - спрете ефекта на снежинката, когато потребителят в момента излиза от прозореца на браузъра, например, превключва към друг раздел, след което снегът спира. Това пести CPU и е по-приятно за потребителя.
снежна буря. snowColor = '#fff' ; - бял цвят на снега (не яжте и не използвайте жълт сняг на сайта :-))
снежна буря. snowCharacter = '•' ;- • (•) = куршум. · обект (·) не се използва, защото се счита за квадрат в някои системи. Всяка промяна може да доведе до изрязване на нашата снежинка и също може да причини промени в flakeWidth (дължина) / flakeHeight (височина), така че бъдете внимателни.
снежна буря. snowStick = вярно; - параметърът позволява на снежинките да се "залепят" в долната част на екрана, когато е изключен, снегът никога няма да се утаи в долната част на екрана.
снежна буря. targetElement = null; - тук е малко по-сложно, разбирам как html елементът е написан по подразбиране в тялото на документа ( тяло ). Може да бъде елемент на ID на ред, като например „myDiV“ или DOM връзка. Нещо като това.
снежна буря. useMeltEffect = true; - с поддръжката на този параметър падналият сняг ще се стопи, когато стойността е включена.
снежна буря. useTwinkleEffect = true; - Позволява на снега да блести извън полезрението, докато пада.
снежна буря. usePositionFixed = невярно; - с булева стойност true - прозорецът за превъртане няма да повлияе на падащия сняг, т.е. той ще върви и ще си отива. Това значително увеличава натоварването на процесора. По подразбиране е невярно.
снежна буря. vMaxX = 8; снежна буря. vMaxY = 5; — стойността на скоростта на снежинките по x и y за бурята. За всяка снежинка се избира случайна променлива в този диапазон.