За блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Анимиран слайд от изображения в публикация

Анимиран слайд
Здравейте всички! За изображенията съм писала достатъчно, но все се появява нещо ново, което ми се иска да споделя. Ето друг вид анимиран слайд от изображения в публикация. Плъзгане на изображенията при превъртане на страницата на публикация е един малък, но много стилен анимиран ефект, който виждаме често в много блогове.



    Предлагам ви го, защото при инсталирането му се използва чист JavaScript, а не отделни кадри от изображения, при което няма проблеми със съвместимостта в съвременните браузъри.

    Описание

    Това, което прави скриптът е да промени непрозрачността на изображенията на 0 и те няма да се скрият, а се преместват за кратко вляво, при което се появява ефекта "Слайд" на превъртане.
    Това означава, че изображението ще бъде на страницата, но няма да се показва винаги, тъй като непрозрачността му е 0. Когато потребителите преглеждат страницата, веднага щом стигнат до изображението, то ще се плъзне и ще се появи. Щом потребителите не гледат изображението, а преминават по текста по-нататък, то отново ще изчезне, прибирайки се в ляво.


    Този тип на анимационен ефект за някои потребители може да е дразнещо. За един блог с по-добър потребителски интерфейс тази анимация се извършва с помощта на JavaScript.


    Ако в браузъра JavaScript е деактивиран, тогава тази слайд с анимационен ефект няма да се осъществи.


    Вече ви информирах за всички предимства и недостатъци на днешното ми предложение. Който от вас иска да го пробва сега е време да го добави в блога си.

    Добавяне на скрипта в темата

    Добавянето на скрипта в темата ще осъществим в няколко стъпки.

    Стъпка 1: Преминете към темата на блога си, а от там минете към редактирате на HTML кода.

    Стъпка 2: Сега търсете (търсене чрез натискане на CTRL + F) участъка от кода </ body>

    Ако откриете този код 3 или повече пъти във вашата тема, то се спрете на 2-рия или 3-тия код </ body>.

    Стъпка 3: Копирайте този по-долу посочен код преди </ body>


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    .post-body img {      opacity:0;      transition:all .5s;    }
        .post-body img {      transform:translateX(-50%) scale(0.95);    }
        .post-body .active {      opacity:1;      transform:translateX(0%) scale(1);    }
    </style>
    <script>
    //<![CDATA[
     function debounce(func, wait = 20, immediate = true) {      var timeout;      return function() {        var context = this, args = arguments;        var later = function() {          timeout = null;          if (!immediate) func.apply(context, args);        };        var callNow = immediate && !timeout;        clearTimeout(timeout);        timeout = setTimeout(later, wait);        if (callNow) func.apply(context, args);      };    }         var post = document.querySelector(".post-body");   var sliderImages = post.querySelectorAll("img");
        function checkSlide() {      sliderImages.forEach(sliderImage => {        

    const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;        const imageBottom = sliderImage.offsetTop + sliderImage.height + 100;        const isHalfShown = slideInAt > sliderImage.offsetTop;        const isNotScrolledPast = window.scrollY < imageBottom;        if (isHalfShown && isNotScrolledPast) {          sliderImage.classList.add('active');        } else {          sliderImage.classList.remove('active');        }      });    }
     window.addEventListener("scroll", debounce(checkSlide));                 

    //]]>  </script></b:if>



    Стъпка 4: Всичко е готово и запишете промените в темата. Отворете своята публикация с изображения и превъртете надолу, за да видите този ефект в действие.

    Персонализиране

    Ако искате да показвате изображенията винаги, когато ги превъртите, изтрийте в кода онова, което е оцветено в червен цвят.

    Заключение

    По подразбиране скриптът ще се зарежда и пуска в страници на публикации с няколко изображения, които не се показват на главната страница.

    Благодаря за това, че проследихте моя урок за Анимиран слайд от изображения в публикация.
    Ако имате затруднения моля, коментирайте и споделете вашето ценно мнение. И останете настроени за още уроци като този. Не забравяйте да споделете това с приятелите си.

    Успех и доскоро.

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop

    Няма коментари:

    Публикуване на коментар