• Flickity

    • Add Flickity Navigation on Custom position
      Demo
      Show CodeHide Code
      var flkty = new Flickity('.packages-slider', {
      // options
      imagesLoaded: true,
      lazyLoad: 1,
      pageDots: false,
      cellAlign: 'left',
      prevNextButtons: false
      });
      $(".slide-next").on("click", function () {
      flkty.next();
      });
      $(".slide-prev").on("click", function () {
      flkty.previous();
      });
    • Disable carousel if single image
      check how many "carousel-cell" there are. If there is only one image, doesnt call the flickity script and add a "src"
      Demo
      Show CodeHide Code
      $('.entry-carousel').each(function () {
      cellCount = $(this).find('div.carousel-cell').length;
      if (cellCount > 1) {
      $(this).addClass("multiple-images");
      } else {
      $(this).addClass("single-image");
      $(this).find('.carousel-cell-image').each(function () {
      imgUrl = $(this).attr('data-flickity-lazyload');
      $(this).attr("src", imgUrl);
      });
      }
      });
    • Flickity Custom Drag Cursor
      Custom drag cursor animation
      Demo
      Show CodeHide Code
      zip Flickity Custom Drag Cursor
    • Infinity logo slider(s)*
      Flickity infinity logo slider

      *"pure" css alternative https://codepen.io/IrtezaAsad/pen/bGOLLvm
      Demo
      Show CodeHide Code
      // speed of ticker
      let tickerSpeed = 2;
      let flickity = null;
      let isPaused = false;
      const slideshowEl = document.querySelector('.logoslider');

      // functions
      const update = () => {
      if (isPaused) return;
      if (flickity.slides) {
      flickity.x = (flickity.x - tickerSpeed) % flickity.slideableWidth;
      flickity.selectedIndex = flickity.dragEndRestingSelect();
      flickity.updateSelectedSlide();
      flickity.settle(flickity.x);
      }
      window.requestAnimationFrame(update);
      };

      const pause = () => {
      isPaused = true;
      };

      const play = () => {
      if (isPaused) {
      isPaused = false;
      window.requestAnimationFrame(update);
      }
      };

      // create flickity instance
      flickity = new Flickity(slideshowEl, {
      autoPlay: false,
      pageDots: false,
      draggable: true,
      wrapAround: true,
      cellSelector: '.carousel-cell',
      prevNextButtons: false,
      selectedAttraction: 0.015,
      friction: 0.25
      });
      flickity.x = 0;

      // event listeners
      slideshowEl.addEventListener('mouseenter', pause, false);
      slideshowEl.addEventListener('focusin', pause, false);
      slideshowEl.addEventListener('mouseleave', play, false);
      slideshowEl.addEventListener('focusout', play, false);

      flickity.on('dragStart', () => {
      isPaused = true;
      });

      // start ticker
      update();

  • Scroll related

    • "Color changing logo"
      Change Body Class according to background Color of HTML Element to adapt SVG Color of fixed Logo on different Sections
      Demo
      Show CodeHide Code
      $(window).scroll(function () {
      var windowTop = Math.max($('body').scrollTop(), $('html').scrollTop());
      $('section, nav, .stage, .mailform, .legalinfo, footer').each(function (index) {
      if (windowTop > ($(this).position().top - 100)) { //customize according Logo
      if ($(this).hasClass('white')) {
      $('body').addClass('bg-white');
      }
      else {
      $('body').removeClass('bg-white');
      }
      }
      });
      }).scroll();
    • Scroll to section
      /!\ jQuery_Full required
      Demo
      Show CodeHide Code
      var headerheight = $("#header").outerHeight();
      $('.indicator-down').on('click', function (e) {
      e.preventDefault();
      $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - headerheight
      }, 400, 'swing');
      });
    • Add visible class on Elements when in Viewport
      Demo
      Show CodeHide Code
      $.fn.isInViewport = function () {
      var elementTop = $(this).offset().top;
      var elementBottom = elementTop + $(this).outerHeight();
      var viewportTop = $(window).scrollTop();
      var viewportBottom = viewportTop + $(window).height();
      return elementBottom > viewportTop && elementTop < viewportBottom;
      };
      $(window).on('resize scroll', function () {
      $('.scroll-el').each(function () {
      if ($(this).isInViewport()) {
      $(this).addClass("visible");
      }
      });
      });
    • Move one div faster to top on scroll when in viewport
      Required Scripts: gsap.min.js and ScrollTrigger.min.js
      Demo
      Show CodeHide Code
      gsap.to(".parallax_scroll", {
      yPercent: -40,
      ease: "none",
      scrollTrigger: {
      trigger: ".highlights",
      scrub: true
      },
      });
    • Smooth parallax Effect on Background Images
      Required Scripts: gsap.min.js and ScrollTrigger.min.js
      Demo
      Show CodeHide Code
      gsap.utils.toArray(".grid-parallax .bg_image").forEach((section, i) => {
      const heightDiff = section.offsetHeight - section.parentElement.offsetHeight;
      gsap.fromTo(section, {
      y: -heightDiff
      }, {
      scrollTrigger: {
      trigger: section.parentElement,
      scrub: true
      },
      y: 0,
      ease: "none"
      });
      });
      //Required CSS
      .grid-parallax {
      position: relative;
      overflow: hidden;
      // height: Fixed Height or calculate height with JS
      .bg_image {
      width: 100%;
    • Subnav items get "selected" when in viewport
      Demo
      Show CodeHide Code
      $(document).ready(function () {
      var topOffset = 100;
      var bottomOffset = 300;
      var anchorNavClass = "anchor-nav";

      //is in vieport function
      $.fn.isInViewport = function (topOffset = 0, bottomOffset = 0) {
      var elementTop = $(this).offset().top;
      var elementBottom = elementTop + $(this).outerHeight();

      var viewportTop = $(window).scrollTop() + topOffset;
      var viewportBottom = viewportTop + $(window).height() - bottomOffset;

      return elementBottom > viewportTop && elementTop < viewportBottom;
      };

      //check if anchor parent is in viewport
      $(window).on('load resize scroll', function () {
      $('.anchor').each(function () {
      var anchorname = $(this).attr('name');
      var $parent = $(this).parent();
      if ($parent.isInViewport(topOffset, bottomOffset)) {
      var $anchorlink = $("." + anchorNavClass + " a[href='#" + anchorname + "']");
      if (!$anchorlink.parent().hasClass("selected")) {
      $("." + anchorNavClass + " li").removeClass("selected");
      $anchorlink.parent().addClass("selected");
      }
      }
      });
      });

      });

  • Forms

    • Change DOM Order of Input and Label
      insert Label after input
      Check Input Values to Style Label accordingly
      Demo
      Show CodeHide Code
      $('.form-group label').each(function () {
      $(this).insertAfter($(this).next('input, textarea'));
      });
      $('.form-group input, .form-group textarea').each(function () {
      var val = $(this).val();
      if (val) {
      $(this).parent('.form-group').addClass('has-val');
      }
      });
      $('body').on('change', '.form-group input, .form-group textarea', function () {
      var val = $(this).val();
      if (val) {
      $(this).parent('.form-group').addClass('has-val');
      }
      else {
      $(this).parent('.form-group').removeClass('has-val');
      }
      });

  • Video

    • Prevent video from loading on Smartphones
      Load video with data-src and transform to src when on Desktop device, use display: none in CSS to hide on Mobile devices
      Demo
      Show CodeHide Code
      $("video").each(function () {
      var bgv = $(this);

      //je récupère le check de taille de la video
      if (bgv.is(':visible')) {
      $('source', bgv).each(
      function () {
      var el = $(this);
      el.attr('src', el.data('src'));
      }
      );
      bgv[0].load();
      }

      var bgvDom = bgv.get(0);

      bgvDom.addEventListener("playing", function () {
      if (bgvDom.readyState == 4) {
      bgvDom.classList.add("isloaded")
      }
      });

      bgvDom.addEventListener("suspend", function (e) {
      if (bgvDom.readyState == 4) {
      bgvDom.classList.add("isloaded")
      }
      });
      });

  • Animations

    • Split string in 1-character-span and add incremental delay
      vanilla js
      Demo
      Show CodeHide Code
      let toSplit = document.querySelector(".string-to-split")

      splitAndClone(toSplit);

      function splitAndClone(elem) {
      var text = elem.textContent.split("");
      var result = "";
      var index = 0;
      // Loop over the array
      text.forEach(function (char) {
      // Append a new span only if the current char is not a space
      result += (char.trim() === "") ? " " : "" + cha

  • Layout

    • Main minimum height related to windows height
      Demo
      Show CodeHide Code
      var headerHeight = document.querySelector('header').offsetHeight;
      var footerHeight = document.querySelector('footer').offsetHeight;
      var viewHeight = window.innerHeight;
      var main = document.querySelector('main');

      main.style.minHeight = viewHeight - headerHeight - footerHeight +"px";

  • Other

    • WebCore Languages Drop Down
      Demo
      Show CodeHide Code
      "HTML"

      <%=SiteRequest.Language.Code%>



      JS
      ('#languages .current').click(function () {
      $(this).parent().toggleClass('show');
      });

      LESS
      #languages {
      .transition;
      display: inline-block;
      color: white;
      position: relative;
      font-size: @font-size-smaller;

      .current {
      display: block;
      background: transparent;
      text-transform: uppercase;
      padding: 10px 5px 10px 15px;
      height: 40px;
      width: 40px;
      line-height: 20px;
      cursor: pointer;
      color: white;
      background: @brand-primary;
      position: relative;
      .transition;

      &:after, &:before {
      position: absolute;
      top: 50%;
      left: 5px;
      content: "";
      width: 5px;
      height: 1px;
      background-color: white;
      .transition;
      }

      &:after {
      transform: rotate(-40deg);
      left: 8px;
      }

      &:before {
      transform: rotate(40deg);
      }

      &:hover {
      background: black;
      }
      }

      .languagelinks {
      background: transparent;
      text-align: center;
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      overflow: hidden;
      max-height: 0;
      z-index: 210;
      .transition;
      color: @text-color;

      a {
      width: 40px;
      display: block;
      color: white;
      padding: 10px 5px;
      height: 40px;
      line-height: 20px;
      text-transform: uppercase;
      background-color: @brand-primary;

      &:hover,
      &:active,
      &:focus {
      color: @brand-secondary;
      }

      &.selected {
      display: none;
      color: @brand-primary;
      }
      }
      }

      &.show {
      color: white;
      z-index: 300;



      .current {

      &:after {
      transform: rotate(40deg);
      }

      &:before {
      transform: rotate(-40deg);
      }
      }

      .languagelinks {
      max-height: 80px;

      a:hover {
      background-color: black;
      color: white;
      }
      }
      }
      }