Codepen code to enfold - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

February 21, 2022 at 4:31 pm #1341676

Hi Guys,

I have a problem with a codepen that I modified. I would like to ask how I can import my codepen code into a page in Enfold. Below you can find my html/css and javascript code.

I already tried to put its javascript in the function.php. I put the html in a code block. And i put the css in the quick css of enfold.

Unfortunately that didn’t work

HTML


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>lenobi Parallax Cards</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
  </head>
  <body>

    <div class="wrapper">

      <!-- Nike 19 -->
      <div class="card card--19">
        <div class="card__header card__header--19">
          <div class="card__watermark" data-watermark="Training"></div>

          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate">

          <span class="card__price card__will-animate">onze diensten</span>

          <h1 class="card__title card__will-animate">Training</h1>
          <span class="card__subtitle card__will-animate">Neem deel aan een van onze trainingen. We verzorgen individuele en teamgerichte trainingen op mbo+ en hbo-niveau aan professionals in de zorg, detailhandel en beveiliging. </span>

        </div>

        <div class="card__body">
          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_2.png" alt="Nike 19" class="card__image card__will-animate">
          <div class="card__wish-list card__wish-list--19 card__will-animate">Lees meer</div>

          <span class="card__category card__will-animate">afgestemd op jouw doel</span>
        </div>
      </div>

      <!-- Nike Solstice -->
      <div class="card card--solstice">
        <div class="card__header card__header--solstice">
          <div class="card__watermark" data-watermark="preventie"></div>

          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate">

          <span class="card__price card__will-animate">Onze diensten</span>

          <h1 class="card__title card__will-animate">Preventie</h1>
          <span class="card__subtitle card__will-animate">Maak gebruik van Preventie Professionals® die ondersteuning bieden en ervoor zorgen dat er voldoende individuele aandacht overblijft voor de cliënt.</span>

        </div>

        <div class="card__body">
          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_B_1.png" alt="Nike Solstice" class="card__image card__will-animate">
          <div class="card__wish-list card__wish-list--solstice card__will-animate">Lees meer</div>

          <span class="card__category card__will-animate">het gewenste resultaat</span>
        </div>
      </div>

      <!-- Nike Huarache -->
      <div class="card card--huarache">
        <div class="card__header card__header--huarache">
          <div class="card__watermark" data-watermark="Care"></div>

          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate">

          <span class="card__price card__will-animate">Onze diensten</span>

          <h1 class="card__title card__will-animate">Care</h1>
          <span class="card__subtitle card__will-animate">In de complexe zorg wordt het steeds moeilijker om cliënten de noodzakelijke primaire zorg te geven. Teams staan vaak onder grote druk en medewerkers wisselen elkaar doorgaans snel af.</span>

        </div>

        <div class="card__body">
          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_C_3.png" alt="Nike Huarache" class="card__image card__will-animate">
          <div class="card__wish-list card__wish-list--solstice card__will-animate">Lees meer</div>

          <span class="card__category card__will-animate">professionele ondersteuning</span>
        </div>
      </div>

    </div> <!-- /wrapper -->

    <div class="cards-placeholder">
      <div class="cards-placeholder__item"></div>
      <div class="cards-placeholder__item"></div>
      <div class="cards-placeholder__item"></div>
    </div>
  </body>
</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;

  font-family: "Roboto", "Helvetica", sans-serif;

  transition: background-color 0.2s;
  will-change: background-color;
}

.inspired-by {
  display: block;
  position: relative;
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.wrapper {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.card {
  display: block;
  position: absolute;
  top: 25px;
  margin: 0 auto;
  width: 350px;
  background-color: #fff;
  border-radius: 15px;

  box-shadow: 0 30 50 rgba(0, 0, 0, 0.2);

  transform: translateX(-50%);
  transition: left 0.5s ease-out;
  will-change: left;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.card--19 {
  left: 50%;
}

.card--solstice,
.card--huarache {
  left: 150%;
}

.card__header {
  position: relative;
  height: 170px;
  padding: 30px 30px 300px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  color: #fff;
}

.card__header--19 {
  background-color: #F72648;
  background-image: linear-gradient(#F72648, #FCCB3C);

  background: #F72648;
  background: linear-gradient(#038ac4, #4ec1c1);
}

.card__header--solstice {
  background-color: #3CA3FC;
  background-image: linear-gradient(#3CA3FC, #FFD300);

  background: #3CA3FC;
  background: linear-gradient(#3CA3FC, #FFD300);
}

.card__header--huarache {
  background-color: #26C9F7;
  background-image: linear-gradient(#26C9F7, #DFFC3C);

  background: #26C9F7;
  background: linear-gradient(#26C9F7, #DFFC3C);
}

.card__watermark {
  overflow: hidden;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
}

.card__watermark::after {
  content: attr(data-watermark);
  position: relative;
  left: -20px;
  color: rgba(0, 0, 0, .3);
  font-size: 240px;
  font-weight: 700;
  text-transform: uppercase;
}

.card__logo {
  width: 110px;
  height: auto;
}

.card__price {
  float: right;
  font-size: 16px;
  font-weight: 300;
}

.card__title {
  margin: 35px 0 20px;
  font-size: 15px;
  line-height: 1.1em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.card__subtitle {
  display: block;
  font-size: 13px;
  font-weight: 300;
}

.card__body {
  position: relative;
  padding: 40px 30px 20px;
}

.card__image {
  z-index: 1;
  position: absolute;
  top: -230px;
  left: 30px;
  width: 125%;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.card__wish-list {
  display: block;
  width: 50%;
  margin: 0 auto 15px;
  padding: 15px;
  border: 2px solid #fff;
  border-radius: 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
}

.card__wish-list--19 {
  color: #038ac4;
  border-color: #038ac4;
}

.card__wish-list--solstice {
  color: #FFBA00;
  border-color: #FFBA00;
}

.card__wish-list--huarache {
  color: #26C9F7;
  border-color: #26C9F7;
}

.card__category {
  display: block;
  font-size: 12px;
  color: #AEAEAE;
  text-transform: uppercase;
  text-align: center;
}

.card__will-animate {
  will-change: transform;
}

.cards-placeholder {
  display: block;
  position: relative;
  margin-bottom: 15px;
  text-align: center;
}

.cards-placeholder__item {
  opacity: 0.3;
  display: inline-block;
  margin-right: 10px;
  background-color: #fff;
  width: 30px;
  height: 5px;
  border-radius: 5px;

  transition: opacity 0.2s;
  will-change: opacity;
}

.cards-placeholder__item--active {
  opacity: 1;
}

Javascript

(function () {
  'use strict';

  var BODY_BACKGROUNDS = [
    '#91FDFF',
    '#FFBA00',
    '#4054FF'
  ];

  function Slider () {
    this.cards = document.querySelectorAll('.card');
    this.currentIndex = 0;

    this.isDragging = false;
    this.startX = 0;
    this.currentX = 0;

    this.initEvents();
    this.setActivePlaceholder();
  }

  // initialize drag events
  Slider.prototype.initEvents = function () {
    document.addEventListener('touchstart', this.onStart.bind(this));
    document.addEventListener('touchmove', this.onMove.bind(this));
    document.addEventListener('touchend', this.onEnd.bind(this));

    document.addEventListener('mousedown', this.onStart.bind(this));
    document.addEventListener('mousemove', this.onMove.bind(this));
    document.addEventListener('mouseup', this.onEnd.bind(this));

  };

  // set active placeholder
  Slider.prototype.setActivePlaceholder = function () {
    var placeholders = document.querySelectorAll('.cards-placeholder__item');
    var activePlaceholder = document.querySelector('.cards-placeholder__item--active')

    if (activePlaceholder) {
      activePlaceholder.classList.remove('cards-placeholder__item--active');
    }

    placeholders[this.currentIndex].classList.add('cards-placeholder__item--active');

    var bodyEl = document.querySelector('body');
    bodyEl.style.backgroundColor = BODY_BACKGROUNDS[this.currentIndex];
  };

  // mousedown event
  Slider.prototype.onStart = function (evt) {
    this.isDragging = true;

    this.currentX = evt.pageX || evt.touches[0].pageX;
    this.startX = this.currentX;

    var card = this.cards[this.currentIndex];

    // calculate ration to use in parallax effect
    this.windowWidth = window.innerWidth;
    this.cardWidth = card.offsetWidth;
    this.ratio = this.windowWidth / (this.cardWidth / 4);
  };

  // mouseup event
  Slider.prototype.onEnd = function (evt) {
    this.isDragging = false;

    var diff = this.startX - this.currentX;
    var direction = (diff > 0) ? 'left' : 'right';
    this.startX = 0;

    if (Math.abs(diff) > this.windowWidth / 4) {
      if (direction === 'left') {
        this.slideLeft();
      } else if (direction === 'right') {
        this.slideRight();
      } else {
        this.cancelMoveCard();
      }

    } else {
      this.cancelMoveCard();

    }

  };

  // mousemove event
  Slider.prototype.onMove = function (evt) {
    if (!this.isDragging) return;

    this.currentX = evt.pageX || evt.touches[0].pageX;
    var diff = this.startX - this.currentX;
    diff *= -1;

    // don't let drag way from the center more than quarter of window
    if (Math.abs(diff) > this.windowWidth / 4) {
      if (diff > 0) {
        diff = this.windowWidth / 4;
      } else {
        diff = - this.windowWidth / 4;
      }
    }

    this.moveCard(diff);
  };

  // slide to left direction
  Slider.prototype.slideLeft = function () {
    // if last don't do nothing
    if (this.currentIndex === this.cards.length - 1) {
      this.cancelMoveCard();
      return;
    }

    var self = this;
    var card = this.cards[this.currentIndex];
    var cardWidth = this.windowWidth / 2;

    card.style.left = '-50%';

    this.resetCardElsPosition();

    this.currentIndex += 1;
    this.setActivePlaceholder();
    card = this.cards[this.currentIndex];

    card.style.left = '50%';

    this.moveCardEls(cardWidth * 3);

    // add delay to resetting position
    setTimeout(function () {
      self.resetCardElsPosition();
    }, 50);
  };

  // slide to right direction
  Slider.prototype.slideRight = function () {
    // if last don't do nothing
    if (this.currentIndex === 0) {
      this.cancelMoveCard();
      return;
    }

    var self = this;
    var card = this.cards[this.currentIndex];
    var cardWidth = this.windowWidth / 2;

    card.style.left = '150%';

    this.resetCardElsPosition();

    this.currentIndex -= 1;
    this.setActivePlaceholder();
    card = this.cards[this.currentIndex];

    card.style.left = '50%';

    this.moveCardEls(-cardWidth * 3);

    // add delay to resetting position
    setTimeout(function () {
      self.resetCardElsPosition();
    }, 50);
  };

  // put active card in original position (center)
  Slider.prototype.cancelMoveCard = function () {
    var self = this;
    var card = this.cards[this.currentIndex];

    card.style.transition = 'transform 0.5s ease-out';
    card.style.transform = '';

    this.resetCardElsPosition();
  };

  // reset to original position elements of card
  Slider.prototype.resetCardElsPosition = function () {
    var self = this;
    var card = this.cards[this.currentIndex];

    var cardLogo = card.querySelector('.card__logo');
    var cardPrice = card.querySelector('.card__price');
    var cardTitle = card.querySelector('.card__title');
    var cardSubtitle = card.querySelector('.card__subtitle');
    var cardImage = card.querySelector('.card__image');
    var cardWishList = card.querySelector('.card__wish-list');
    var cardCategory = card.querySelector('.card__category');
    var cardWillAnimate = card.querySelectorAll('.card__will-animate');

    // move card elements to original position
    cardWillAnimate.forEach(function (el) {
      el.style.transition = 'transform 0.5s ease-out';
    });

    cardLogo.style.transform = '';
    cardPrice.style.transform = '';

    cardTitle.style.transform = '';
    cardSubtitle.style.transform = '';

    cardImage.style.transform = '';
    cardWishList.style.transform = '';
    cardCategory.style.transform = '';

    // clear transitions
    setTimeout(function () {
      card.style.transform = '';
      card.style.transition = '';

      cardWillAnimate.forEach(function (el) {
        el.style.transition = '';
      });
    }, 500);

  };

  // slide card while dragging
  Slider.prototype.moveCard = function (diff) {

    var card = this.cards[this.currentIndex];

    card.style.transform = 'translateX(calc(' + diff + 'px - 50%))';
    diff *= -1;

    this.moveCardEls(diff);
  };

  // create parallax effect on card elements sliding them
  Slider.prototype.moveCardEls = function (diff) {
    var card = this.cards[this.currentIndex];

    var cardLogo = card.querySelector('.card__logo');
    var cardPrice = card.querySelector('.card__price');
    var cardTitle = card.querySelector('.card__title');
    var cardSubtitle = card.querySelector('.card__subtitle');
    var cardImage = card.querySelector('.card__image');
    var cardWishList = card.querySelector('.card__wish-list');
    var cardCategory = card.querySelector('.card__category');
    var cardWillAnimate = card.querySelectorAll('.card__will-animate');

    cardLogo.style.transform = 'translateX(' + (diff / this.ratio) + 'px)';
    cardPrice.style.transform = 'translateX(' + (diff / this.ratio) + 'px)';

    cardTitle.style.transform = 'translateX(' + (diff / (this.ratio * 0.90)) + 'px)';
    cardSubtitle.style.transform = 'translateX(' + (diff / (this.ratio * 0.85)) + 'px)';

    cardImage.style.transform = 'translateX(' + (diff / (this.ratio * 0.35)) + 'px)';

    cardWishList.style.transform = 'translateX(' + (diff / (this.ratio * 0.85)) + 'px)';
    cardCategory.style.transform = 'translateX(' + (diff / (this.ratio * 0.65)) + 'px)';

  };

  // create slider
  var slider = new Slider();

})();

February 21, 2022 at 4:57 pm #1341679

Guenni007

Participant

maybe you give a link to the pen too!

February 21, 2022 at 5:02 pm #1341680

Justin Blom

Participant

This is the link to the codepen
https://codepen.io/justin19932/pen/XWzqbxN
And this is the test site im working on.
https://test.dutchdesignfabriek.com/

February 21, 2022 at 5:08 pm #1341681

Justin Blom

Participant

Hi,
This is the link to the codepen

https://codepen.io/justin19932/pen/XWzqbxN

And this is the test site im working on
https://test.dutchdesignfabriek.com/

February 22, 2022 at 3:57 am #1341737

Ismael

Moderator

Hi,

Thank you for the inquiry.

Did you include the whole html tag in the code block? You have to take only the elements or parts starting from the wrapper.

// https://pastebin.com/nXZcg6CC

And use the css code without the rules for the html tag.

// https://pastebin.com/39eVYV0L

The javascript can be added in an external file and then use the wp_enqueue_script function. to register it

// https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Best regards,
Ismael

February 24, 2022 at 6:33 pm #1342168

Guenni007

Participant

For one thing, it took me a very long time to see anything at all that had to do with the scripts. You have to experiment a lot on the site to realize that you can pack the cards and move them horizontally.
Wouldn’t it be better to write a small script that allows horizontal scrolling for the desktop with the mouse wheel, and in the mobile case is controlled by swipe. But then you would have to set small arrows (best animated) to even get the idea that here content is to be seen horizontally.

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.