Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to add Codepen code my website?


joeyyanna

Question

Recommended Posts

  • 0
On 10/13/2021 at 11:49 AM, KDT said:

@tuanphan  could you help implementing this code from codepen too?

https://codepen.io/elykdedelatorre/pen/zYdGoJz please TIA 🙏

Add this code to Code Block (You should find another code. I see the above Codepen code will conflict with some icons in toolbar in Editor Mode)



<section class="timeline">
  <div class="container">
    <div class="timeline-item">
      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInLeft">
        <h2>Title</h2>
        <div class="date">1 MAY 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div> 

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content timeline-card js--fadeInRight">
        <div class="timeline-img-header">
          <h2>Card Title</h2>
        </div>
        <div class="date">25 MAY 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>

    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInLeft">
        <div class="date">3 JUN 2016</div>
        <h2>Quote</h2>
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!</blockquote>
      </div>
    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInRight">
        <h2>Title</h2>
        <div class="date">22 JUN 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content timeline-card js--fadeInLeft">
        <div class="timeline-img-header">
          <h2>Card Title</h2>
        </div>
        <div class="date">10 JULY 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content timeline-card js--fadeInRight">
        <div class="timeline-img-header">
          <h2>Card Title</h2>
        </div>
        <div class="date">30 JULY 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>  

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInLeft">
        <div class="date">5 AUG 2016</div>
        <h2>Quote</h2>
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!</blockquote>
      </div>
    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content timeline-card js--fadeInRight">
        <div class="timeline-img-header">
          <h2>Card Title</h2>
        </div>
        <div class="date">19 AUG 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>  

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInLeft">
        <div class="date">1 SEP 2016</div>
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>   



  </div>
</section>

<style>
  .timeline {
  position: relative;
}
.timeline::before {
  content: "";
  background: #C5CAE9;
  width: 5px;
  height: 95%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item {
  width: 100%;
  margin-bottom: 70px;
}
.timeline-item:nth-child(even) .timeline-content {
  float: right;
  padding: 40px 30px 10px 30px;
}
.timeline-item:nth-child(even) .timeline-content .date {
  right: auto;
  left: 0;
}
.timeline-item:nth-child(even) .timeline-content::after {
  content: "";
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  left: -15px;
  border-width: 10px 15px 10px 0;
  border-color: transparent #f5f5f5 transparent transparent;
}
.timeline-item::after {
  content: "";
  display: block;
  clear: both;
}

.timeline-content {
  position: relative;
  width: 45%;
  padding: 10px 30px;
  border-radius: 4px;
  background: #f5f5f5;
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
}
.timeline-content::after {
  content: "";
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  right: -15px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #f5f5f5;
}

.timeline-img {
  width: 30px;
  height: 30px;
  background: #3F51B5;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-top: 25px;
  margin-left: -15px;
}

a {
  background: #3F51B5;
  color: #FFFFFF;
  padding: 8px 20px;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 20px;
  margin-top: 10px;
  display: inline-block;
  border-radius: 2px;
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
}
a:hover, a:active, a:focus {
  background: #32408f;
  color: #FFFFFF;
  text-decoration: none;
}

.timeline-card {
  padding: 0 !important;
}
.timeline-card p {
  padding: 0 20px;
}
.timeline-card a {
  margin-left: 20px;
}

.timeline-item .timeline-img-header {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("https://picsum.photos/1000/800/?random") center center no-repeat;
  background-size: cover;
}

.timeline-img-header {
  height: 200px;
  position: relative;
  margin-bottom: 20px;
}
.timeline-img-header h2 {
  color: #FFFFFF;
  position: absolute;
  bottom: 5px;
  left: 20px;
}

blockquote {
  margin-top: 30px;
  color: #757575;
  border-left-color: #3F51B5;
  padding: 0 20px;
}

.date {
  background: #FF4081;
  display: inline-block;
  color: #FFFFFF;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

@media screen and (max-width: 768px) {
  .timeline::before {
    left: 50px;
  }
  .timeline .timeline-img {
    left: 50px;
  }
  .timeline .timeline-content {
    max-width: 100%;
    width: auto;
    margin-left: 70px;
  }
  .timeline .timeline-item:nth-child(even) .timeline-content {
    float: none;
  }
  .timeline .timeline-item:nth-child(odd) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #f5f5f5 transparent transparent;
  }
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>
<script>
  $(function(){

  window.sr = ScrollReveal();

  if ($(window).width() < 768) {

  	if ($('.timeline-content').hasClass('js--fadeInLeft')) {
  		$('.timeline-content').removeClass('js--fadeInLeft').addClass('js--fadeInRight');
  	}

  	sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });

  } else {
  	
  	sr.reveal('.js--fadeInLeft', {
	    origin: 'left',
	    distance: '300px',
		  easing: 'ease-in-out',
	    duration: 800,
	  });

	  sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });

  }
  
  sr.reveal('.js--fadeInLeft', {
	    origin: 'left',
	    distance: '300px',
		  easing: 'ease-in-out',
	    duration: 800,
	  });

	  sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });


});

</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 10/22/2021 at 11:53 PM, gretchenf said:

@tuanphan, would you help me to implement this code from codepen too? Its the moving text on scroll 🙂

https://codepen.io/chriscoyier/pen/qeZwRb

 

Thank you!

Add a Code Block

<div class="ss">
<p>LANSING, Mich. — Sure, you could wear a campaign button. But a photo with the candidate is so much more versatile: suitable for avatars, posting with a clever hashtag, even printing out and framing if you want to go analog.</p>

<p>Posing for the camera with a presidential candidate used to be a perk generally reserved for wealthy donors. At Senator Elizabeth Warren’s events, all it costs is passing some time in a well-organized selfie* line.</p>

<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
  <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
  <text width="100%" style="transform:translate3d(0,0,0);">
      <textPath style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve" startOffset="1200px" id="text-path">*The pictures are not technically selfies.</textPath>
  </text>
</svg>

<p>At a recent event in Lansing, a small army of campaign staff members — working like a factory assembly line that hums along — helped usher voters through their encounter with Ms. Warren in eight key steps.</p>

<p>Since entering the presidential race, Ms. Warren has taken pictures with more than 38,000 people, her campaign estimates. Ms. Warren says the photos are part of her effort to build what she likes to call a “grass-roots movement.”</p>

<p>“It’s how I make this real, person to person,” she said in an interview. “I know I won’t be able to shake the hand of every single person; I know I won’t be able to take a selfie with every single human being in this country. But I’m going to try.”</p></div>
<style>
  .ss p {
  max-width: 500px;
  margin: 0 auto 1rem;
}

text {
  fill: red;
  font-size: 30px;
}
</style>
<script>
  const textPath = document.querySelector("#text-path");

const h = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", e => {
  let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 40) + 1200)
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 10/26/2021 at 1:38 AM, tan-flatworm said:

Hello @tuanphan can you please help me add the following codepens as well?


1)https://codepen.io/electerious/pen/MQrRxX
I tried it on a drop-down-button on my page but failed totally...

 

2)https://codepen.io/amit_sheen/pen/af022e80f75789c6b80a8d0eb718f890

 

Thank you!

#1. Add a Code Block

<button class="button ss">
	<span>Hover me I'm awesome</span>
</button>
<style>
  .ss.button {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;
}
.ss.button span {
  position: relative;
  pointer-events: none;
}
.ss.button::before {
  --size: 0;
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #4405f7, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.ss.button:hover::before {
  --size: 400px;
}
</style>
<script>
  document.querySelector('.button').onmousemove = e => {

  const x = e.pageX - e.target.offsetLeft;
  const y = e.pageY - e.target.offsetTop;

  e.target.style.setProperty('--x', `${x}px`);
  e.target.style.setProperty('--y', `${y}px`);

};
</script>

#2. Add a Code Block

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>

<div class="content">
  <div class="text"></div>
</div>
<style>
  .cell {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.cell:nth-child(1):hover ~ .content {
  --partialString: "L";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(2):hover ~ .content {
  --partialString: "Lo";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(3):hover ~ .content {
  --partialString: "Lor";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(4):hover ~ .content {
  --partialString: "Lore";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(5):hover ~ .content {
  --partialString: "Lorem";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(6):hover ~ .content {
  --partialString: "Lorem ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(7):hover ~ .content {
  --partialString: "Lorem i";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(8):hover ~ .content {
  --partialString: "Lorem ip";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(9):hover ~ .content {
  --partialString: "Lorem ips";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(10):hover ~ .content {
  --partialString: "Lorem ipsu";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(11):hover ~ .content {
  --partialString: "Lorem ipsum";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(12):hover ~ .content {
  --partialString: "Lorem ipsum ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(13):hover ~ .content {
  --partialString: "Lorem ipsum d";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(14):hover ~ .content {
  --partialString: "Lorem ipsum do";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(15):hover ~ .content {
  --partialString: "Lorem ipsum dol";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(16):hover ~ .content {
  --partialString: "Lorem ipsum dolo";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(17):hover ~ .content {
  --partialString: "Lorem ipsum dolor";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(18):hover ~ .content {
  --partialString: "Lorem ipsum dolor ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(19):hover ~ .content {
  --partialString: "Lorem ipsum dolor s";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(20):hover ~ .content {
  --partialString: "Lorem ipsum dolor si";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(21):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(22):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(23):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit a";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(24):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit am";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(25):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit ame";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(26):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(27):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(28):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet c";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(29):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet co";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(30):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet con";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(31):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet cons";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(32):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet conse";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(33):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consec";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(34):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consect";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(35):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consecte";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(36):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectet";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(37):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetu";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(38):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(39):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(40):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur a";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(41):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur ad";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(42):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(43):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adip";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(44):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(45):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipis";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(46):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(47):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisic";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(48):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisici";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(49):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicin";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(50):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(51):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(52):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing e";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(53):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing el";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(54):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing eli";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(55):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing elit";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(56):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
  --size: 32px;
  --color: #fff;
}

.content {
  --partialString: "Hover over the screen to reveal the text...";
  --color: #333;
  --size: 16px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 1em;
}

.text:after {
  content: var(--partialString);
  font-family: "Fredoka One", cursive;
  font-size: var(--size);
  color: var(--color);
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
19 hours ago, tuanphan said:

#1. Add a Code Block

<button class="button ss">
	<span>Hover me I'm awesome</span>
</button>
<style>
  .ss.button {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;
}
.ss.button span {
  position: relative;
  pointer-events: none;
}
.ss.button::before {
  --size: 0;
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #4405f7, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.ss.button:hover::before {
  --size: 400px;
}
</style>
<script>
  document.querySelector('.button').onmousemove = e => {

  const x = e.pageX - e.target.offsetLeft;
  const y = e.pageY - e.target.offsetTop;

  e.target.style.setProperty('--x', `${x}px`);
  e.target.style.setProperty('--y', `${y}px`);

};
</script>

#2. Add a Code Block

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>

<div class="content">
  <div class="text"></div>
</div>
<style>
  .cell {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.cell:nth-child(1):hover ~ .content {
  --partialString: "L";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(2):hover ~ .content {
  --partialString: "Lo";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(3):hover ~ .content {
  --partialString: "Lor";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(4):hover ~ .content {
  --partialString: "Lore";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(5):hover ~ .content {
  --partialString: "Lorem";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(6):hover ~ .content {
  --partialString: "Lorem ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(7):hover ~ .content {
  --partialString: "Lorem i";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(8):hover ~ .content {
  --partialString: "Lorem ip";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(9):hover ~ .content {
  --partialString: "Lorem ips";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(10):hover ~ .content {
  --partialString: "Lorem ipsu";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(11):hover ~ .content {
  --partialString: "Lorem ipsum";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(12):hover ~ .content {
  --partialString: "Lorem ipsum ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(13):hover ~ .content {
  --partialString: "Lorem ipsum d";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(14):hover ~ .content {
  --partialString: "Lorem ipsum do";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(15):hover ~ .content {
  --partialString: "Lorem ipsum dol";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(16):hover ~ .content {
  --partialString: "Lorem ipsum dolo";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(17):hover ~ .content {
  --partialString: "Lorem ipsum dolor";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(18):hover ~ .content {
  --partialString: "Lorem ipsum dolor ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(19):hover ~ .content {
  --partialString: "Lorem ipsum dolor s";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(20):hover ~ .content {
  --partialString: "Lorem ipsum dolor si";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(21):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(22):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(23):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit a";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(24):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit am";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(25):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit ame";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(26):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(27):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(28):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet c";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(29):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet co";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(30):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet con";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(31):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet cons";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(32):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet conse";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(33):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consec";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(34):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consect";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(35):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consecte";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(36):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectet";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(37):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetu";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(38):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(39):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(40):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur a";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(41):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur ad";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(42):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(43):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adip";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(44):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(45):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipis";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(46):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(47):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisic";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(48):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisici";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(49):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicin";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(50):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(51):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(52):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing e";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(53):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing el";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(54):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing eli";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(55):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing elit";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(56):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
  --size: 32px;
  --color: #fff;
}

.content {
  --partialString: "Hover over the screen to reveal the text...";
  --color: #333;
  --size: 16px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 1em;
}

.text:after {
  content: var(--partialString);
  font-family: "Fredoka One", cursive;
  font-size: var(--size);
  color: var(--color);
}
</style>

 

Thank you very much! Unfortunately the first one is not responsive and the second one totally messes up the page.

Is there a way around it?

 

(https://flatworm-tan-tn5d.squarespace.com/about-1-1  pw:2b1DA5)

 

Link to comment
  • 0
On 10/24/2021 at 11:28 PM, tuanphan said:

Add a Code Block

<div class="ss">
<p>LANSING, Mich. — Sure, you could wear a campaign button. But a photo with the candidate is so much more versatile: suitable for avatars, posting with a clever hashtag, even printing out and framing if you want to go analog.</p>

<p>Posing for the camera with a presidential candidate used to be a perk generally reserved for wealthy donors. At Senator Elizabeth Warren’s events, all it costs is passing some time in a well-organized selfie* line.</p>

<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
  <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
  <text width="100%" style="transform:translate3d(0,0,0);">
      <textPath style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve" startOffset="1200px" id="text-path">*The pictures are not technically selfies.</textPath>
  </text>
</svg>

<p>At a recent event in Lansing, a small army of campaign staff members — working like a factory assembly line that hums along — helped usher voters through their encounter with Ms. Warren in eight key steps.</p>

<p>Since entering the presidential race, Ms. Warren has taken pictures with more than 38,000 people, her campaign estimates. Ms. Warren says the photos are part of her effort to build what she likes to call a “grass-roots movement.”</p>

<p>“It’s how I make this real, person to person,” she said in an interview. “I know I won’t be able to shake the hand of every single person; I know I won’t be able to take a selfie with every single human being in this country. But I’m going to try.”</p></div>
<style>
  .ss p {
  max-width: 500px;
  margin: 0 auto 1rem;
}

text {
  fill: red;
  font-size: 30px;
}
</style>
<script>
  const textPath = document.querySelector("#text-path");

const h = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", e => {
  let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 40) + 1200)
});
</script>

 

Thank you! This worked great! 

Is there a way to make the font larger when viewing on mobile?

Link to comment
  • 0
On 10/28/2021 at 3:45 PM, tan-flatworm said:

Thank you very much! Unfortunately the first one is not responsive and the second one totally messes up the page.

Is there a way around it?

 

(https://flatworm-tan-tn5d.squarespace.com/about-1-1  pw:2b1DA5)

 

#1. Try edit script code to this

<script>
  document.querySelector('.ss.button').onmousemove = e => {

  const x = e.pageX - e.target.offsetLeft;
  const y = e.pageY - e.target.offsetTop;

  e.target.style.setProperty('--x', `${x}px`);
  e.target.style.setProperty('--y', `${y}px`);

};
</script>

 

On 10/29/2021 at 1:04 AM, gretchenf said:

Thank you! This worked great! 

Is there a way to make the font larger when viewing on mobile?

Can you share link to page where you added the code? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 10/30/2021 at 10:02 PM, tuanphan said:

#1. Try edit script code to this

<script>
  document.querySelector('.ss.button').onmousemove = e => {

  const x = e.pageX - e.target.offsetLeft;
  const y = e.pageY - e.target.offsetTop;

  e.target.style.setProperty('--x', `${x}px`);
  e.target.style.setProperty('--y', `${y}px`);

};
</script>

 

Can you share link to page where you added the code? We can check easier

https://www.manealley.com/ pw; manealley2021

Link to comment
  • 0

Hi i was wondering if someone could help me with this code..

If tried to copy it in a Code block ... but it didn't work..

https://codepen.io/knyttneve/pen/bgvmma/

 

#timeline-1.timeline-container

  .timeline-header

    h2.timeline-header__title Mustafa Kemal Atatürk

    h3.timeline-header__subtitle FATHER OF THE TURKS

  .timeline

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://i.cdn.ensonhaber.com/resimler/diger/ataturk_3473.jpg')

        h2.timeline__content-title

          | 1881

        p.timeline__content-desc

          | He was born in 1881 (probably in the spring) in Salonica, then an Ottoman city, now inGreece. His father Ali Riza, a customs official turned lumber merchant, died when Mustafawas still a boy. His mother Zubeyde, adevout and strong-willed woman, raised him and his sister.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://gazetemanifesto.com/wp-content/uploads/2015/11/mustafa-kemal.jpg')

        h2.timeline__content-title 1893

        p.timeline__content-desc

          | First enrolled in a traditionalreligious school, he soon switched to a modern school. In 1893, he entered a military highschool where his mathematics teacher gave him the second name Kemal (meaning perfection)in recognition of young Mustafa's superior achievement.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://www.volpeypir.com/upload/3732.jpg')

        h2.timeline__content-title 1905

        p.timeline__content-desc

          | In 1905, Mustafa Kemal graduated from the War Academy in Istanbul with the rank of Staff Captain. Posted in Damascus, he started with several colleagues, a clandestinesociety called "Homeland and Freedom" to fight against the Sultan'sdespotism.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://cdn.yemek.com/uploads/2014/11/ataturk-10-kasim.jpg')

        h2.timeline__content-title 1908

        p.timeline__content-desc

          | In 1908 he helped the group of officers who toppled the Sultan. Mustafa Kemal'scareer flourished as he won his heroism in the far corners of the Ottoman Empire,including Albania and Tripoli. He also briefly served as a staff officer in Salonica andIstanbul and as a military attache in Sofia.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://ataturk.istanbul.gov.tr/GalleryLibrary/12.jpg')

        h2.timeline__content-title 1915

        p.timeline__content-desc

          | In 1915, when Dardanelles campaign was launched, Colonel Mustafa Kemal became anational hero by winning successive victories and finally repelling the invaders.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://blog.istanbul1881.com/wp-content/uploads/2016/08/atat%C3%BCrk-%C3%BCn-inan%C4%B1lmaz-karizmatik-fotograf%C4%B1_861050.jpg')

        h2.timeline__content-title 1916

        p.timeline__content-desc

          | Promotedto general in 1916, at age 35, he liberated two major provinces in eastern Turkey thatyear. In the next two years, he served as commander of several Ottoman armies inPalestine, Aleppo, and elsewhere, achieving another major victory by stopping the enemyadvance at Aleppo.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://manisanokta.com/wp-content/uploads/2014/07/ataturk-20.jpg')

        h2.timeline__content-title 1919

        p.timeline__content-desc

          | On May 19, 1919, Mustafa Kemal Pasha landed in the Black Sea port of Samsun to startthe War of Independence. In defiance of the Sultan's government, he rallied a liberationarmy in Anatolia and convened the Congress of Erzurum and Sivas which established thebasis for the new national effort under his leadership.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://www.volpeypir.com/upload/3732.jpg')

        h2.timeline__content-title 1920

        p.timeline__content-desc

          | On April 23, 1920, the GrandNational Assembly was inaugurated. Mustafa Kemal Pasha was elected to its Presidency.

          | Fighting on many fronts, he led his forces to victory against rebels and invadingarmies. Following the Turkish triumph at the two major battles at Inonu in Western Turkey,the Grand National Assembly conferred on Mustafa Kemal Pasha the title ofCommander-in-Chief with the rank of Marshal.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://sanatkaravani.com/wp-content/uploads/2015/11/ataturk-4.jpg')

        h2.timeline__content-title 1922

        p.timeline__content-desc

          | At the end of August 1922, the Turkish armieswon their ultimate victory. Within a few weeks, the Turkish mainland was completelyliberated, the armistice signed, and the rule of the Ottoman dynasty abolished

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='https://turkcetarih.com/wp-content/uploads/2015/05/Atat%C3%BCrkveCumhuriyet.jpg')

        h2.timeline__content-title 1923

        p.timeline__content-desc

          | In July 1923, the national government signed the Lausanne Treaty with Great Britain,France, Greece, Italy, and others. In mid-October, Ankara became the capital of the new Turkish State. On October 29, the Republic was proclaimed and Mustafa Kemal Pasha wasunanimously elected President of the Republic.

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='https://pbs.twimg.com/media/Cw69H8pXUAEaSqa.jpg')

        h2.timeline__content-title 1934

        p.timeline__content-desc

          | The account of Atatürk's fifteen year Presidency is a saga of dramatic modernization.With indefatigable determination, he created a new political and legal system, abolished the Caliphate and made both government and education secular, gave equal rights to women,changed the alphabet and the attire, and advanced the arts and the sciences, agricultureand industry.

          | In 1934, when the surname law was adopted, the national parliament gave him the name 

          i

            strong "Atatürk" (Father of the Turks)

    .timeline-item(data-text='FATHER OF THE TURKS')

      .timeline__content

        img.timeline__img(src='http://www.bik.gov.tr/wp-content/uploads/2016/11/20161110_2_20037273_15856882.jpg?fit=1024%2C863')

        h2.timeline__content-title 1938

        p.timeline__content-desc

          | On November 10, 1938, following an illness of a few months, the national liberator and the Father of modern Turkey died. But his legacy to his people and to the world endures.

.demo-footer

  a(href='http://www.turkishnews.com/Ataturk/life.htm', target='_blank') Source/Kaynak

 

<style>

@import url('https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One');

// Responsive

@mixin responsive() {

  @media only screen and (max-width: 767px) {

    @content;

  }

}

 

$content-font: Cardo;

$heading-font: 'Pathway Gothic One',

sans-serif;

$timeline-width:700px;

$timeline-container-width:100%;

.timeline {

  display: flex;

  margin: 0 auto;

  flex-wrap: wrap;

  flex-direction: column;

  max-width: $timeline-width;

  position: relative;

  &__content {

    &-title {

      font-weight: normal;

      font-size: 66px;

      margin: -10px 0 0 0;

      transition: .4s;

      padding: 0 10px;

      box-sizing: border-box;

      font-family: $heading-font;

      color: #fff;

    }

    &-desc {

      margin: 0;

      font-size: 15px;

      box-sizing: border-box;

      color: rgba(#fff, .7);

      font-family: $content-font;

      font-weight: normal;

      line-height: 25px;

    }

  }

  &:before {

    position: absolute;

    left: 50%;

    width: 2px;

    height: 100%;

    margin-left: -1px;

    content: "";

    background: rgba(255, 255, 255, .07);

    @include responsive() {

      left: 40px;

    }

  }

  &-item {

    padding: 40px 0;

    opacity: .3;

    filter: blur(2px);

    transition: .5s;

    box-sizing: border-box;

    width: calc(50% - 40px);

    display: flex;

    position: relative;

    transform: translateY(-80px);

    &:before {

      content: attr(data-text);

      letter-spacing: 3px;

      width: 100%;

      position: absolute;

      color: rgba(#fff, .5);

      font-size: 13px;

      font-family: $heading-font;

      border-left: 2px solid rgba(#fff, .5);

      top: 70%;

      margin-top: -5px;

      padding-left: 15px;

      opacity: 0;

      right: calc(-100% - 56px);

    }

    &:nth-child(even) {

      align-self: flex-end;

      &:before {

        right: auto;

        text-align: right;

        left: calc(-100% - 56px);

        padding-left: 0;

        border-left: none;

        border-right: 2px solid rgba(#fff, .5);

        padding-right: 15px;

      }

    }

    &--active {

      opacity: 1;

      transform: translateY(0);

      filter: blur(0px);

      &:before {

        top: 50%;

        transition: .3s all .2s;

        opacity: 1;

      }

      .timeline__content-title {

        margin: -50px 0 20px 0;

      }

    }

    @include responsive() {

      align-self: baseline !important;

      width: 100%;

      padding: 0 30px 150px 80px;

      &:before {

        left: 10px !important;

        padding: 0 !important;

        top: 50px;

        text-align: center !important;

        width: 60px;

        border: none !important;

      }

      &:last-child {

        padding-bottom: 40px;

      }

    }

  }

  &__img {

    max-width: 100%;

    box-shadow: 0 10px 15px rgba(0, 0, 0, .4);

  }

  &-container {

    width: $timeline-container-width;

    position: relative;

    padding: 80px 0;

    transition: .3s ease 0s;

    background-attachment: fixed;

    background-size: cover;

    &:before {

      position: absolute;

      left: 0;

      top: 0;

      width: 100%;

      height: 100%;

      background: rgba(99, 99, 99, 0.8);

      content: "";

    }

  }

  &-header {

    width: 100%;

    text-align: center;

    margin-bottom: 80px;

    position: relative;

    &__title {

      color: #fff;

      font-size: 46px;

      font-family: $content-font;

      font-weight: normal;

      margin: 0;

    }

    &__subtitle {

      color: rgba(255, 255, 255, .5);

      font-family: $heading-font;

      font-size: 16px;

      letter-spacing: 5px;

      margin: 10px 0 0 0;

      font-weight: normal;

    }

  }

}

 

// DEMO

.demo-footer {

  padding: 60px 0;

  text-align: center;

  a {

    color: #999;

    display: inline-block;

    font-family: $content-font;

  }

}

 

</style>

 

<script>

 

(function($) {

  $.fn.timeline = function() {

    var selectors = {

      id: $(this),

      item: $(this).find(".timeline-item"),

      activeClass: "timeline-item--active",

      img: ".timeline__img"

    };

    selectors.item.eq(0).addClass(selectors.activeClass);

    selectors.id.css(

      "background-image",

      "url(" +

        selectors.item

          .first()

          .find(selectors.img)

          .attr("src") +

        ")"

    );

    var itemLength = selectors.item.length;

    $(window).scroll(function() {

      var max, min;

      var pos = $(this).scrollTop();

      selectors.item.each(function(i) {

        min = $(this).offset().top;

        max = $(this).height() + $(this).offset().top;

        var that = $(this);

        if (i == itemLength - 2 && pos > min + $(this).height() / 2) {

          selectors.item.removeClass(selectors.activeClass);

          selectors.id.css(

            "background-image",

            "url(" +

              selectors.item

                .last()

                .find(selectors.img)

                .attr("src") +

              ")"

          );

          selectors.item.last().addClass(selectors.activeClass);

        } else if (pos <= max - 40 && pos >= min) {

          selectors.id.css(

            "background-image",

            "url(" +

              $(this)

                .find(selectors.img)

                .attr("src") +

              ")"

          );

          selectors.item.removeClass(selectors.activeClass);

          $(this).addClass(selectors.activeClass);

        }

      });

    });

  };

})(jQuery);

 

$("#timeline-1").timeline();

 

</script>

Link to comment
  • 0
On 10/31/2021 at 3:02 AM, tuanphan said:

#1. Try edit script code to this

<script>
  document.querySelector('.ss.button').onmousemove = e => {

  const x = e.pageX - e.target.offsetLeft;
  const y = e.pageY - e.target.offsetTop;

  e.target.style.setProperty('--x', `${x}px`);
  e.target.style.setProperty('--y', `${y}px`);

};
</script>

Thank you @tuanphan. This code didn't work for me either but I figured out a way around (for anyone who is interested) :

I added an Id to my html code and changed the css code accordingly. I used the following code for js:

<script>
let btn = document.getElementById("btn");
btn.onmousemove = function (e) {
  let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
    btn.style.setProperty("--x", x + "px")
    btn.style.setProperty("--y", y + "px");
};
</script>

 

Link to comment
  • 0
On 11/5/2021 at 6:33 AM, catalin said:

@tuanphan Same question here, how would I apply this in a code block? https://codepen.io/kenwestphal/pen/xqRZYZ

Also for future reference, how are you doing this?!

 

See this video

<section class="sp-intro">
    <h4 class="sp-headline slide">
        <span>Specializing in</span>
        <span class="sp-words-wrapper">
            <b class="is-visible">Squarespace websites</b>
            <b>Shopify stores</b>
            <b>Skyward forms</b>
            <b>much more!</b>
        </span>
    </h4>
</section>
<style>
  .sp-intro {
width: 100%;
max-width: 100%;
text-align: center;
margin: 0 auto;
}
.sp-intro h4, .sp-intro b, .sp-intro i, .sp-intro p, .sp-intro span {
line-height: 46px;
font-size: 38px;
font-weight: 400;
font-style: initial;
color: #111111;
}
.sp-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
}
.sp-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
  width: auto !important;
}
.sp-words-wrapper b.is-visible {
position: relative;
}
.no-js .sp-words-wrapper b {
opacity: 0;
}
.no-js .sp-words-wrapper b.is-visible {
opacity: 1;
}

.sp-headline.slide span {
display: inline-block;
padding: 0;
}
.sp-headline.slide .sp-words-wrapper {
overflow: hidden;
vertical-align: bottom;
}
.sp-headline.slide b {
opacity: 0;
top: .2em;
}
.sp-headline.slide b.is-visible {
top: 0;
opacity: 1;
-webkit-animation: slide-in 0.6s;
-moz-animation: slide-in 0.6s;
animation: slide-in 0.6s;
}
.sp-headline.slide b.is-hidden {
-webkit-animation: slide-out 0.6s;
-moz-animation: slide-out 0.6s;
animation: slide-out 0.6s;
}

@-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes slide-in {
0% {
opacity: 0;
-moz-transform: translateY(-100%);
}
60% {
opacity: 1;
-moz-transform: translateY(20%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
-o-transform: translateY(20%);
transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
}
}
@-moz-keyframes slide-out {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
60% {
opacity: 0;
-moz-transform: translateY(120%);
}
100% {
opacity: 0;
-moz-transform: translateY(100%);
}
}
@keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
-moz-transform: translateY(120%);
-ms-transform: translateY(120%);
-o-transform: translateY(120%);
transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
@media (min-width : 668px) and (max-width : 1024px) {
.sp-intro h4, .sp-intro b, .sp-intro i, .sp-intro p, .sp-intro span {
line-height: 46px !important;
font-size: 38px !important;
font-weight: 400 !important;
}
}
@media (max-width : 667px) {
.sp-intro h4, .sp-intro b, .sp-intro i, .sp-intro span, .sp-intro p {
line-height: 36px !important;
font-size: 28px !important;
font-weight: 400 !important;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
  
jQuery(document).ready(function($){

var animationDelay = 2500,
barAnimationDelay = 3800,
barWaiting = barAnimationDelay - 3000, 
lettersDelay = 50,
typeLettersDelay = 150,
selectionDuration = 500,
typeAnimationDelay = selectionDuration + 800,
revealDuration = 600,
revealAnimationDelay = 1500;

initHeadline();


function initHeadline() {

singleLetters($('.sp-headline.letters').find('b'));
animateHeadline($('.sp-headline'));
}

function singleLetters($words) {
$words.each(function(){
var word = $(this),
letters = word.text().split(''),
selected = word.hasClass('is-visible');
for (i in letters) {
if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
}
var newLetters = letters.join('');
word.html(newLetters).css('opacity', 1);
});
}

function animateHeadline($headlines) {
var duration = animationDelay;
$headlines.each(function(){
var headline = $(this);

if(headline.hasClass('loading-bar')) {
duration = barAnimationDelay;
setTimeout(function(){ headline.find('.sp-words-wrapper').addClass('is-loading') }, barWaiting);
} else if (headline.hasClass('clip')){
var spanWrapper = headline.find('.sp-words-wrapper'),
newWidth = spanWrapper.width() + 10
spanWrapper.css('width', newWidth);
} else if (!headline.hasClass('type') ) {

var words = headline.find('.sp-words-wrapper b'),
width = 0;
words.each(function(){
var wordWidth = $(this).width();
if (wordWidth > width) width = wordWidth;
});
headline.find('.sp-words-wrapper').css('width', width);
};

setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
});
}

function hideWord($word) {
var nextWord = takeNext($word);

if($word.parents('.sp-headline').hasClass('type')) {
var parentSpan = $word.parent('.sp-words-wrapper');
parentSpan.addClass('selected').removeClass('waiting');
setTimeout(function(){ 
parentSpan.removeClass('selected'); 
$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
}, selectionDuration);
setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);

} else if($word.parents('.sp-headline').hasClass('letters')) {
var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);

}else if($word.parents('.sp-headline').hasClass('clip')) {
$word.parents('.sp-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
switchWord($word, nextWord);
showWord(nextWord);
});

} else if ($word.parents('.sp-headline').hasClass('loading-bar')){
$word.parents('.sp-words-wrapper').removeClass('is-loading');
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('is-loading') }, barWaiting);

} else {
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
}

function hideLetter($letter, $word, $bool, $duration) {
$letter.removeClass('in').addClass('out');

if(!$letter.is(':last-child')) {
 setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);
} else if($bool) { 
 setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
}

if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
var nextWord = takeNext($word);
switchWord($word, nextWord);
} 
}

function showLetter($letter, $word, $bool, $duration) {
$letter.addClass('in').removeClass('out');

if(!$letter.is(':last-child')) { 
setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
} else { 
if($word.parents('.sp-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('waiting'); }, 200);}
if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
}
}

function takeNext($word) {
return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}

function takePrev($word) {
return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
}

function switchWord($oldWord, $newWord) {
$oldWord.removeClass('is-visible').addClass('is-hidden');
$newWord.removeClass('is-hidden').addClass('is-visible');
}
});

</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 11/5/2021 at 8:36 PM, MattCaspian said:

Hi @tuanphan - your work supporting our community with CodePen CSS is remarkable.

Not wanting to take advantage, but given your expertise could I please request your assistance with https://codepen.io/MarcoGuglielmelli/pen/lLCxy

I'd like to add a tweaked version of this as the background on one page of a SS 7.1 website i'm developing.

Thank you in advance, Matthew

Try this Code Block

<div id="large-header" class="large-header">
  <canvas id="demo-canvas"></canvas>
    <h1 class="main-title">Connect <span class="thin">Three</span></h1>
</div>
<link rel="stylesheet" href="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/css/demo.css"/>
<style>
  /* Header */
.large-header {
  position: relative;
  width: 100%;
  background: #333;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  z-index: 1;
}
#large-header {
  background-image: url("https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/img/demo-1-bg.jpg");
}
.main-title {
  position: absolute;
  margin: 0;
  padding: 0;
  color: #f9f1e9;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.demo-1 .main-title {
  text-transform: uppercase;
  font-size: 4.2em;
  letter-spacing: 0.1em;
}
.main-title .thin {
  font-weight: 200;
}
@media only screen and (max-width: 768px) {
  .demo-1 .main-title {
    font-size: 3em;
  }
}

</style>
<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js"></script>
<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js"></script>
<script src="https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js"></script>
<script>
  (function() {

    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

    // Main
    initHeader();
    initAnimation();
    addListeners();

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: width/2, y: height/2};

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('demo-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');

        // create points
        points = [];
        for(var x = 0; x < width; x = x + width/20) {
            for(var y = 0; y < height; y = y + height/20) {
                var px = x + Math.random()*width/20;
                var py = y + Math.random()*height/20;
                var p = {x: px, originX: px, y: py, originY: py };
                points.push(p);
            }
        }

        // for each point find the 5 closest points
        for(var i = 0; i < points.length; i++) {
            var closest = [];
            var p1 = points[i];
            for(var j = 0; j < points.length; j++) {
                var p2 = points[j]
                if(!(p1 == p2)) {
                    var placed = false;
                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(closest[k] == undefined) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }

                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }

        // assign a circle to each point
        for(var i in points) {
            var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
            points[i].circle = c;
        }
    }

    // Event handling
    function addListeners() {
        if(!('ontouchstart' in window)) {
            window.addEventListener('mousemove', mouseMove);
        }
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function mouseMove(e) {
        var posx = posy = 0;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)    {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }

    function scrollCheck() {
        if(document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    // animation
    function initAnimation() {
        animate();
        for(var i in points) {
            shiftPoint(points[i]);
        }
    }

    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in points) {
                // detect points in range
                if(Math.abs(getDistance(target, points[i])) < 4000) {
                    points[i].active = 0.3;
                    points[i].circle.active = 0.6;
                } else if(Math.abs(getDistance(target, points[i])) < 20000) {
                    points[i].active = 0.1;
                    points[i].circle.active = 0.3;
                } else if(Math.abs(getDistance(target, points[i])) < 40000) {
                    points[i].active = 0.02;
                    points[i].circle.active = 0.1;
                } else {
                    points[i].active = 0;
                    points[i].circle.active = 0;
                }

                drawLines(points[i]);
                points[i].circle.draw();
            }
        }
        requestAnimationFrame(animate);
    }

    function shiftPoint(p) {
        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
            onComplete: function() {
                shiftPoint(p);
            }});
    }

    // Canvas manipulation
    function drawLines(p) {
        if(!p.active) return;
        for(var i in p.closest) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.closest[i].x, p.closest[i].y);
            ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
            ctx.stroke();
        }
    }

    function Circle(pos,rad,color) {
        var _this = this;

        // constructor
        (function() {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        })();

        this.draw = function() {
            if(!_this.active) return;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
            ctx.fill();
        };
    }

    // Util
    function getDistance(p1, p2) {
        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
    }
    
})();
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 11/9/2021 at 9:53 AM, entirehome said:

@tuanphan If I could please ask for your help with this code that I would like to use on my shopify store: https://codepen.io/clarewhatever/pen/YqXNeB

Your time is very much appreciated! 

With Shopify, it has no Code Block, so this will be a bit complex. You can duplicate the site & add me as a contributor? I will test to see how to add Codepen code to Shopify.

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...