How to add Codepen code my website?

tuanphan · July 10, 2021

On 7/9/2021 at 2:45 AM, cdubarr said:

Hello,

I've been at this for a week and I've managed this far. I will be changing the photo, but how do I add this to CSS in squarespace?

https://codepen.io/mjdubarr/pen/GRmZLzE

Code Block

<div class="skw-pages">
  <div class="skw-page skw-page-1 active">
    <div class="skw-page__half skw-page__half--left">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
         
        </div>
      </div>
    </div>
  </div>
  <div class="skw-page skw-page-2">
    <div class="skw-page__half skw-page__half--left">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          
        </div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
  </div>
  
        </div>
      </div>
    </div>
  </div>
  
  
      </div>
    </div>
  </div>
  
  
          
          
         
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .skw-pages {
  overflow: hidden;
  position: relative;
  height: 100vh;
}

.skw-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.skw-page__half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100vh;
  transition: transform 1s;
}
.skw-page__half--left {
  left: 0;
  transform: translate3d(-32.4vh, 100%, 0);
}
.skw-page__half--right {
  left: 50%;
  transform: translate3d(32.4vh, -100%, 0);
}
.skw-page.active .skw-page__half {
  transform: translate3d(0, 0, 0);
}
.skw-page__skewed {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 140%;
  height: 100%;
  transform: skewX(-18deg);
  background: #000;
}
.skw-page__half--left .skw-page__skewed {
  left: -40%;
}
.skw-page__half--right .skw-page__skewed {
  right: -40%;
}
.skw-page__content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 30%;
  color: #fff;
  transform: skewX(18deg);
  transition: transform 1s, opacity 1s;
  background-size: cover;
}
.skw-page__half--left .skw-page__content {
  padding-left: 30%;
  padding-right: 30%;
  transform-origin: 100% 0;
}
.skw-page__half--right .skw-page__content {
  padding-left: 30%;
  padding-right: 30%;
  transform-origin: 0 100%;
}
.skw-page.inactive .skw-page__content {
  opacity: 0.5;
  transform: skewX(18deg) scale(0.95);
}
.skw-page-1 .skw-page__half--left .skw-page__content {
  background-image: url("https://static1.squarespace.com/static/60dcee5190edb42edbef26cd/t/60e75cbb799f350e2a527693/1625775291628/row-1-col-1.png");
}
.skw-page-1 .skw-page__half--left .skw-page__content background-image {
  size: 2%;
}
.skw-page-1 .skw-page__half--right .skw-page__content {
  background-image: url("https://static1.squarespace.com/static/60dcee5190edb42edbef26cd/t/60e75c733eac0c5b60adc10f/1625775220029/row-1-col-2.png");
}
.skw-page-2 .skw-page__half--left .skw-page__content {
  background-image: url("https://static1.squarespace.com/static/60dcee5190edb42edbef26cd/t/60e75cbb799f350e2a527693/1625775291628/row-1-col-1.png");
}
.skw-page-2 .skw-page__half--right .skw-page__content {
  background-image: url("https://static1.squarespace.com/static/60dcee5190edb42edbef26cd/t/60e75c733eac0c5b60adc10f/1625775220029/row-1-col-2.png");
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {

  var curPage = 4;
  var numOfPages = $(".skw-page").length;
  var animTime = 1000;
  var scrolling = false;
  var pgPrefix = ".skw-page-";

  function pagination() {
    scrolling = true;

    $(pgPrefix + curPage).removeClass("inactive").addClass("active");
    $(pgPrefix + (curPage - 1)).addClass("inactive");
    $(pgPrefix + (curPage + 1)).removeClass("active");

    setTimeout(function() {
      scrolling = false;
    }, animTime);
  };

  function navigateUp() {
    if (curPage === 1) return;
    curPage--;
    pagination();
  };

  function navigateDown() {
    if (curPage === numOfPages) return;
    curPage++;
    pagination();
  };

  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (scrolling) return;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else { 
      navigateDown();
    }
  });

  $(document).on("keydown", function(e) {
    if (scrolling) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });

});
</script>

ievavi · July 26, 2021

@tuanphan, would you help me to implement this code from codepen too?

https://codepen.io/arjancodes/pen/gbweYB

Mysite: www.ievaviphoto.com

tuanphan · July 27, 2021

18 hours ago, ievavi said:

@tuanphan, would you help me to implement this code from codepen too?

https://codepen.io/arjancodes/pen/gbweYB

Mysite: www.ievaviphoto.com

Add a Code Block

<ul class="codepen">
  <li>
    <div class="section-title">
      <h2>Section 1</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum temporibus dicta reprehenderit tempore quisquam consequuntur porro omnis laboriosam praesentium at et sapiente, provident sit! Suscipit recusandae, ab ratione dignissimos.</p>
    </div>
  </li>
  <li class="active">
    <div class="section-title">
      <h2>Section 2</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam delectus, eius nostrum aspernatur voluptas enim fugit ipsa magni voluptatem, odio sit accusamus vel id, commodi consequuntur possimus repellat necessitatibus!</p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 3</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur saepe vel facilis quae nihil ad aspernatur ex delectus. Tenetur nulla voluptates similique quos, quia possimus, magnam esse natus quis ipsa.</p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 4</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, optio illo, delectus deleniti animi accusamus. Laboriosam maiores totam provident aliquam. Unde, incidunt amet officia a obcaecati, ducimus at molestiae nemo.</p>
    </div>    
  </li>
</ul>
<style>
  ul.codepen {
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}

 ul.codepen li {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 20px;
  background: #E74C3C;
  cursor: pointer;
  transition: all 0.5s ease;
}
 ul.codepen li:hover {
  background: #e53f2e;
}
 ul.codepen li.active {
  flex: 5;
  background: #fff;
  cursor: default;
}
 ul.codepen li.active h2 {
  color: #E74C3C;
}
 ul.codepen li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #E74C3C;
}
 ul.codepen li .section-title {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: white;
}
 ul.codepen li .section-title h2 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}
 ul.codepen li .section-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var section = $('li');

function toggleAccordion() {
  section.removeClass('active');
  $(this).addClass('active');
}

section.on('click', toggleAccordion);
</script>

ievavi · July 27, 2021

2 minutes ago, tuanphan said:

<ul class="codepen">
  <li>
    <div class="section-title">
      <h2>Section 1</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum temporibus dicta reprehenderit tempore quisquam consequuntur porro omnis laboriosam praesentium at et sapiente, provident sit! Suscipit recusandae, ab ratione dignissimos.</p>
    </div>
  </li>
  <li class="active">
    <div class="section-title">
      <h2>Section 2</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam delectus, eius nostrum aspernatur voluptas enim fugit ipsa magni voluptatem, odio sit accusamus vel id, commodi consequuntur possimus repellat necessitatibus!</p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 3</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur saepe vel facilis quae nihil ad aspernatur ex delectus. Tenetur nulla voluptates similique quos, quia possimus, magnam esse natus quis ipsa.</p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 4</h2>
    </div>
    <div class="section-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, optio illo, delectus deleniti animi accusamus. Laboriosam maiores totam provident aliquam. Unde, incidunt amet officia a obcaecati, ducimus at molestiae nemo.</p>
    </div>    
  </li>
</ul>
<style>
  ul.codepen {
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}

 ul.codepen li {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 20px;
  background: #E74C3C;
  cursor: pointer;
  transition: all 0.5s ease;
}
 ul.codepen li:hover {
  background: #e53f2e;
}
 ul.codepen li.active {
  flex: 5;
  background: #fff;
  cursor: default;
}
 ul.codepen li.active h2 {
  color: #E74C3C;
}
 ul.codepen li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #E74C3C;
}
 ul.codepen li .section-title {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: white;
}
 ul.codepen li .section-title h2 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}
 ul.codepen li .section-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var section = $('li');

function toggleAccordion() {
  section.removeClass('active');
  $(this).addClass('active');
}

section.on('click', toggleAccordion);
</script>

That's amazing stuff! Thanks so much! Any chance do you know how to appropriate this for mobile screens? (that it would fo horizontal rather than vertical?)

tuanphan · August 2, 2021

On 7/27/2021 at 5:10 PM, ievavi said:

That's amazing stuff! Thanks so much! Any chance do you know how to appropriate this for mobile screens? (that it would fo horizontal rather than vertical?)

Can you share link to page where you added the code?

ievavi · August 2, 2021

8 minutes ago, tuanphan said:

Can you share link to page where you added the code?

Sure - it's in about page.

https://guitar-whale-z827.squarespace.com/about
Pass: TrialWebsite

tuanphan · August 3, 2021

On 8/2/2021 at 3:06 PM, ievavi said:

Sure - it's in about page.

https://guitar-whale-z827.squarespace.com/about
Pass: TrialWebsite

Which section did you add the code? I can't find it in about page

ievavi · August 3, 2021

5 minutes ago, tuanphan said:

Which section did you add the code? I can't find it in about page

It's called, SNIPPETS FROM MY LIFE
Section: section[data-section-id="60ff30b2bbf0a573aa1873d5"]
Block: #block-yui_3_17_2_1_1627379114686_22447

tuanphan · August 4, 2021

23 hours ago, ievavi said:

It's called, SNIPPETS FROM MY LIFE
Section: section[data-section-id="60ff30b2bbf0a573aa1873d5"]
Block: #block-yui_3_17_2_1_1627379114686_22447

Hi. How do you want it to be on mobile?

ievavi · August 4, 2021

3 hours ago, tuanphan said:

Hi. How do you want it to be on mobile?

I was wondering how I could put them into a grid for smaller screens? Tablets and devices.
The reference is taken from this page: https://www.nataliewalkerphoto.com/about

RogerH · August 4, 2021

Hi @tuanphan

I tried to get this Code: https://codepen.io/TylerBerry/pen/LEzrXm on my page: https://www.lgg.ch/test

but it doesn't work properly.

Any idea?

tuanphan · August 5, 2021

17 hours ago, RogerH said:

Hi @tuanphan

I tried to get this Code: https://codepen.io/TylerBerry/pen/LEzrXm on my page: https://www.lgg.ch/test

but it doesn't work properly.

Any idea?

Try this new code

	<div id="timeline">
		<ul id="dates">
			<li><a href="#1900" class="selected">1900</a></li>
			<li><a href="#1930">1930</a></li>
			<li><a href="#1944">1944</a></li>
			<li><a href="#1950">1950</a></li>
			<li><a href="#1971">1971</a></li>
			<li><a href="#1977">1977</a></li>
			<li><a href="#1989">1989</a></li>
			<li><a href="#1999">1999</a></li>
			<li><a href="#2001">2001</a></li>
			<li><a href="#2011">2011</a></li>
		</ul>
		<ul id="issues">
			<li id="1900" class="selected">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/1.png" />
				<h1>1900</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="1930">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/2.png" />
				<h1>1930</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="1944">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/3.png" />
				<h1>1944</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="1950">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/4.png" />
				<h1>1950</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="1971">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/5.png" />
				<h1>1971</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="1977">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/6.png" />
				<h1>1977</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="1989">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/7.png" />
				<h1>1989</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="1999">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/8.png" />
				<h1>1999</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="2001">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/9.png" />
				<h1>2001</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
			<li id="2011">
				<img src="http://www.csslab.cl/ejemplos/timelinr/latest/images/10.png" />
				<h1>2011</h1>
				<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
			</li>
		</ul>
		<div id="grad_top"></div>
		<div id="grad_bottom"></div>
		<a href="#" id="next">+</a>
		<a href="#" id="prev">-</a>
	</div>
<style>
  #timeline * {
	margin: 0;
	padding: 0;
}
  #timeline a {
	color: #ffffcc;
	text-decoration: none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
	#timeline a:hover,
	#timeline a.selected {
		color: #ffcc00;
	}

#timeline h1,#timeline h2,#timeline h4,#timeline h5,#timeline h6 {
	text-align: center;
	color: #ccc;
	text-shadow: #000 1px 1px 2px;
	margin-bottom: 5px;
}
	#timeline h1 {
		font-size: 18px;
	}
	#timeline h2 {
		font-size: 14px;
	}
.sociales {
	text-align: center;
	margin-bottom: 20px;
}

	#timeline {
		width: 500px;
		height: 600px;
		overflow: hidden;
		margin: 40px auto;
		position: relative;
		background: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/dot.gif') 3px top repeat-y;
	}
		#dates {
			width: 100px;
			height: 600px;
			overflow: hidden;
			float: left;
		}
			#dates li {
				list-style: none;
				width: 100px;
				height: 100px;
				line-height: 100px;
				font-size: 24px;
				padding-left: 10px;
				background: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/biggerdot.png') left center no-repeat;
			}
				#dates a {
					line-height: 38px;
					padding-bottom: 10px;
				}
				#dates .selected {
			        font-size: 38px;
				}
		
		#issues {
			width: 400px;
			height: 600px;
			overflow: hidden;
			float: left;
		}	
			#issues li {
				max-width: 300px; // width: 400px;
				height: 600px;
				list-style: none;
         text-align: center; // add

			}
				#issues li.selected img {
					-webkit-transform: scale(1.1,1.1);
					-moz-transform: scale(1.1,1.1);
				    -o-transform: scale(1.1,1.1);
				    -ms-transform: scale(1.1,1.1);
				    transform: scale(1.1,1.1);
				}
				#issues li img {
					// float: left;
            width: 200px; // add
					margin: 10px 30px 10px 50px;
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
					zoom: 1;
					-webkit-transition: all 2s ease-in-out;
					-moz-transition: all 2s ease-in-out;
					-o-transition: all 2s ease-in-out;
					-ms-transition: all 2s ease-in-out; 
					transition: all 2s ease-in-out;
					-webkit-transform: scale(0.7,0.7);
					-moz-transform: scale(0.7,0.7);
				    -o-transform: scale(0.7,0.7);
				    -ms-transform: scale(0.7,0.7);
				    transform: scale(0.7,0.7);
				}
				#issues li h1 {
					color: #ffcc00;
					font-size: 48px;
					text-align: center;
					text-shadow: #000 1px 1px 2px;
				}
				#issues li p {
					font-size: 14px;
					margin: 10px 20px;
					font-weight: normal;
					line-height: 22px;
					text-shadow: #000 1px 1px 2px;
				}
		
		#grad_top,
		#grad_bottom {
			width: 500px;
			height: 80px;
			position: absolute;
		}
			#grad_top {
		        top: 0;
		        background: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/grad_top.png') repeat-x;
			}
			#grad_bottom {
		        bottom: 0;
		        background: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/grad_bottom.png') repeat-x;
			}
		
		#next,
		#prev {
			position: absolute;
			left: 45%; // left: 55%;
			font-size: 70px;
			width: 38px;
			height: 22px;
			background-position: 0 -44px;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
			#next:hover,
			#prev:hover {
				background-position:  0 0;
			}
			#next {
				bottom: 0;
				background-image: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/next_v.png');
			}
			#prev {
				top: 0;
				background-image: url('http://www.csslab.cl/ejemplos/timelinr/latest/images/prev_v.png');
			}
				#next.disabled,
				#prev.disabled {
					opacity: 0.2;
				}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.csslab.cl/ejemplos/timelinr/latest/js/jquery.timelinr-0.9.54.js"></script>
<script>
  		$(function(){
			$().timelinr({
				orientation: 	'vertical',
				issuesSpeed: 	300,
				datesSpeed: 	100,
				arrowKeys: 		'true',
				startAt:		3
			})
		});
</script>

tuanphan · August 5, 2021

20 hours ago, ievavi said:

I was wondering how I could put them into a grid for smaller screens? Tablets and devices.
The reference is taken from this page: https://www.nataliewalkerphoto.com/about

Add to Design > Custom CSS

/* about grid on mobile */
@media screen and (max-width:767px) {
div#background {
    position: relative !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.mood-board .element {
    height: auto !important;
    width: 100% !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    bottom: unset !important;
    position: relative !important;
}
}

ievavi · August 11, 2021

On 8/5/2021 at 9:52 AM, tuanphan said:

Add to Design > Custom CSS

/* about grid on mobile */
@media screen and (max-width:767px) {
div#background {
    position: relative !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.mood-board .element {
    height: auto !important;
    width: 100% !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    bottom: unset !important;
    position: relative !important;
}
}

That's s much appreciated! Thanks a lot for the code. Any chance you would know how I can put all images in the middle ? Now all the content is for some reason pushed to the left...

tuanphan · August 14, 2021

On 8/11/2021 at 7:34 PM, ievavi said:

That's s much appreciated! Thanks a lot for the code. Any chance you would know how I can put all images in the middle ? Now all the content is for some reason pushed to the left...

Hi. Looks fine here. Can you take a screenshot? Which device/browser do you use?

ievavi · August 14, 2021

4 hours ago, tuanphan said:

Hi. Looks fine here. Can you take a screenshot? Which device/browser do you use?

This is how it looks on iphone 11, Safari (& wish it to be centered)

shedthemusic · August 24, 2021

Thank you so much @tuanphan for helping everyone with their codepen questions! I have one as well, https://codepen.io/justKD/pen/MWWYQBr. I've been trying to get something like this on my site for years, and I would be so so so so very grateful if you could help me out!

http://shedthemusic.com/mmtm-11

Squarespace 7.0 Montauk

Edited August 24, 2021 by shedthemusic
Add URL

tuanphan · August 27, 2021

On 8/24/2021 at 10:36 AM, shedthemusic said:

Thank you so much @tuanphan for helping everyone with their codepen questions! I have one as well, https://codepen.io/justKD/pen/MWWYQBr. I've been trying to get something like this on my site for years, and I would be so so so so very grateful if you could help me out!

http://shedthemusic.com/mmtm-11

Squarespace 7.0 Montauk

Hi. Add a Code Block >> Paste this code

<button id='toggle'>toggle</button>

<div id='text'>
Click the toggle to display the metronome UI. The widget is also draggable. See the full API on <a href="https://github.com/justKD/KDMetronomeJS">GitHub</a>.</div>

<script src='https://cdn.jsdelivr.net/gh/justKD/KDMetronomeJS/KDMetronome.min.js'></script>
<style>
  #toggle {
  height: 80px;
  width: 80px;
  margin: 12px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.5);
  font-size: 1em;
  color: #fff;
  background-color: #000;
  border-radius: 10px;
  border: none;
  outline: none;
}
#toggle:active {
  margin: 14px;
  width: 78.4px;
  height: 78.4px;
}
#text {
  margin: 40px;
  float: right;
}

</style>
<script>
  /* The widget is generated on the fly. Simply pass a DOM ID for whichever element should toggle the widget display when clicked. */

const metronome = new KDMetronome('toggle')



/* Headless mode disposes of the default UI. You can set a custom callback as well as create multiple individually controlled metronomes. */

// const metronome2 = new KDMetronome({
//     headless: true,
//     bpm: 180,
// })

// metronome2.callback(_ => console.log('tick'))

// document.getElementById('toggle').addEventListener("click", e => metronome2.running() ? metronome2.stop() : metronome2.start())
</script>

jenniferboddam · September 2, 2021

hi @tuanphan Im trying to get this : https://codepen.io/cameronknight/pen/qBNvrRQ

on my site but I'm not sure why its not working? and when i did add the css it messed up other pages instead of the one page I wanted it on. any help is super appreciated!

tuanphan · September 5, 2021

On 9/2/2021 at 10:59 PM, jenniferboddam said:

hi @tuanphan Im trying to get this : https://codepen.io/cameronknight/pen/qBNvrRQ

on my site but I'm not sure why its not working? and when i did add the css it messed up other pages instead of the one page I wanted it on. any help is super appreciated!

Just answered on your own post. Try checking

annaamay · September 13, 2021

Hi @tuanphan can you share the codepen codes for https://codepen.io/cameronknight/pen/qBNvrRQ here? I can't seem to find the post on Jennifer's page.

Thank you! ❤️

tuanphan · September 16, 2021

On 9/14/2021 at 6:53 AM, annaamay said:

Hi @tuanphan can you share the codepen codes for https://codepen.io/cameronknight/pen/qBNvrRQ here? I can't seem to find the post on Jennifer's page.

Thank you! ❤️

Try adding a Code Block

  <div class="container tcontainer">
    <section data-bgcolor="#bcb8ad" data-textcolor="#032f35">
      <div>
        <h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1>
        <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p>
      </div>

    </section>

    <section id="sectionPin">
      <div class="pin-wrap">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
        <img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">
        <img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">
        <img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">

      </div>
    </section>
    <section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
      <h2 data-scroll data-scroll-speed="1" class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</a></h2>
    </section>
  </div>
<link rel="stylesheet" href="https://use.typekit.net/skn8ash.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"/>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);

const pageContainer = document.querySelector(".container");

/* SMOOTH SCROLL */
const scroller = new LocomotiveScroll({
  el: pageContainer,
  smooth: true
});

scroller.on("scroll", ScrollTrigger.update);

ScrollTrigger.scrollerProxy(pageContainer, {
  scrollTop(value) {
    return arguments.length
      ? scroller.scrollTo(value, 0, 0)
      : scroller.scroll.instance.scroll.y;
  },
  getBoundingClientRect() {
    return {
      left: 0,
      top: 0,
      width: window.innerWidth,
      height: window.innerHeight
    };
  },
  pinType: pageContainer.style.transform ? "transform" : "fixed"
});

////////////////////////////////////
////////////////////////////////////
window.addEventListener("load", function () {
  let pinBoxes = document.querySelectorAll(".pin-wrap > *");
  let pinWrap = document.querySelector(".pin-wrap");
  let pinWrapWidth = pinWrap.offsetWidth;
  let horizontalScrollLength = pinWrapWidth - window.innerWidth;

  // Pinning and horizontal scrolling

  gsap.to(".pin-wrap", {
    scrollTrigger: {
      scroller: pageContainer, //locomotive-scroll
      scrub: true,
      trigger: "#sectionPin",
      pin: true,
      // anticipatePin: 1,
      start: "top top",
      end: pinWrapWidth
    },
    x: -horizontalScrollLength,
    ease: "none"
  });

  ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll

  ScrollTrigger.refresh();
});
</script>

and add this to DESIGN > CUSTOM CSS

/* CSS test code */
.tcontainer {
section:not(#sectionPin) {
  min-height: 100vh;
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
  padding: 50px 10vw;
  margin: auto;
  place-items: center;
}

img {
  height: 80vh;
  width: auto;
  object-fit: cover;
}

h1 {
  font-size: 5rem;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 1rem;
  position: absolute;
  top: 10vw;
  left: 10vw;
  z-index: 4;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 768px) {
  h1 {
    font-size: 16vw;
  }
}
h1 span {
  display: block;
}

h2 {
  font-size: 2rem;
  max-width: 400px;
}

.credit {
  font-family: Termina, sans-serif;
}
.credit a {
  color: var(--text-color);
}

* {
  box-sizing: border-box;
}

#sectionPin {
  height: 100vh;
  overflow: hidden;
  display: flex;
  left: 0;
  background: var(--text-color);
  color: var(--bg-color);
}

.pin-wrap {
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 50px 10vw;
}
.pin-wrap > * {
  min-width: 60vw;
  padding: 0 5vw;
}

p {
  position: absolute;
  bottom: 10vw;
  right: 10vw;
  width: 200px;
  line-height: 1.5;
}
}

tuanphan · September 29, 2021

On 9/27/2021 at 5:59 PM, caila said:

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

https://codepen.io/oliverturner/pen/mAoXqp

Add to Code Block

<p class="tuan">I whip my mouse back and forth</p>
<style>
  p.tuan {
  counter-reset: hueStart var(--grad-start) hueEnd var(--grad-end);
  position: relative;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: var(--font-title);
  font: 100 var(--font-title)/1 sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
}
p.tuan::before, p.tuan::after {
  position: absolute;
  display: block;
  width: 100%;
  padding: 5px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
p.tuan::before {
  content: "hsl(" counter(hueStart) ", 100%, 75%)";
  bottom: 100%;
}
p.tuan::after {
  content: "hsl(" counter(hueEnd) ", 100%, 50%)";
  top: 100%;
}
</style>
<script>
  const w = window.innerWidth;
const p = document.querySelector("p");

const getPercentX = x => Math.round(x / w * 360);
const styleEl = document.documentElement.style;
const setStyle = styleEl.setProperty.bind(styleEl);

const updateGradient = percentX => {
  const gradStart = percentX;
  const gradEnd = (percentX + 120) % 360;

  setStyle("--grad-start", gradStart);
  setStyle("--grad-end", gradEnd);
};

document.addEventListener("mousemove", e => {
  updateGradient(getPercentX(e.clientX));
});

document.addEventListener("touchmove", e => {
  updateGradient(getPercentX(e.touches[0].screenX));
});
</script>

Anele0610 · October 2, 2021

hello!

I'm going through the same problem as everyone else!

@tuanphan please help 🙏

https://codepen.io/superpikar/pen/wrevRq

Really need this as soon as possible...

Thanks..

Anele

tuanphan · October 3, 2021

On 10/2/2021 at 7:50 PM, Anele0610 said:

hello!

I'm going through the same problem as everyone else!

@tuanphan please help 🙏

https://codepen.io/superpikar/pen/wrevRq

Really need this as soon as possible...

Thanks..

Anele

Use Code Block

<div id="app" class="container tuan">
  <div class="row">
    <div class="col-md-12">
      <h1>Horizontal Timeline with Swiper</h1>
      Credit : 
      <ul>
        <li>Horizontal timeline CSS based on <a href="https://codepen.io/abhisharma2/pen/vEKWVo">https://codepen.io/abhisharma2/pen/vEKWVo</a> with a few modifications.</li>  
        <li>Website development step <a href="https://xbsoftware.com/blog/website-development-process-full-guide/">https://xbsoftware.com/blog/website-development-process-full-guide/</a></li>
        <li>Swiper Grab Cursor <a href="http://idangero.us/swiper/demos/12-grab-cursor.html">http://idangero.us/swiper/demos/12-grab-cursor.html</a></li>
      </ul>
      <div class="swiper-container">
        <p class="swiper-control">
          <button type="button" class="btn btn-default btn-sm prev-slide">Prev</button>
          <button type="button" class="btn btn-default btn-sm next-slide">Next</button>
        </p>
        <div class="swiper-wrapper timeline">
<!--           <div class="swiper-slide" v-for="item in steps">
            <div class="timestamp">
              <span class="date">{{item.dateLabel}}<span>
            </div>
            <div class="status">
              <span>{{item.title}}</span>
            </div>
          </div> -->
          <div class="swiper-slide">
            <div class="timestamp">
              <span class="date">April 2017<span>
            </div>
            <div class="status">
              <span>This is Title</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="timestamp">
              <span class="date">May 2017<span>
            </div>
            <div class="status">
              <span>This is Second Title</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="timestamp">
              <span class="date">June 2017<span>
            </div>
            <div class="status">
              <span>This is Third Title</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="timestamp">
              <span class="date">July 2017<span>
            </div>
            <div class="status">
              <span>This is Fourth Title</span>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</div>
            <style>
             #app {
  padding: 50px 0;
}

.timeline {
  margin: 50px 0;
  list-style-type: none;
  display: flex;
  padding: 0;
  text-align: center;
}

.timeline li {
  transition: all 200ms ease-in;
}

.timestamp {
  width: 100%;
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 100;
}

.status {
  padding: 0px 40px;
  display: flex;
  justify-content: center;
  border-top: 4px solid #3e70ff;
  position: relative;
  transition: all 200ms ease-in;
}

.status span {
  font-weight: 600;
  padding-top: 20px;
}

.status span:before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: #e8eeff;
  border-radius: 25px;
  border: 4px solid #3e70ff;
  position: absolute;
  top: -15px;
  left: calc(50% - 12px);
  transition: all 200ms ease-in;
}

.swiper-control {
  text-align: right;
}

.swiper-container {
  width: 100%;
  height: 250px;
  margin: 50px 0;
  overflow: hidden;
  padding: 0 20px 30px 20px;
}

.swiper-slide {
  width: 200px;
  text-align: center;
  font-size: 18px;
}

.swiper-slide:nth-child(2n) {
  width: 40%;
}

.swiper-slide:nth-child(3n) {
  width: 20%;
}
            </style>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"/>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
            <script>
              const data = [
  { dateLabel: 'January 2017', title: 'Gathering Information' },
  { dateLabel: 'February 2017', title: 'Planning' },
  { dateLabel: 'March 2017', title: 'Design' },
  { dateLabel: 'April 2017', title: 'Content Writing and Assembly' },
  { dateLabel: 'May 2017', title: 'Coding' },
  { dateLabel: 'June 2017', title: 'Testing, Review & Launch' },
  { dateLabel: 'July 2017', title: 'Maintenance' }
];

new Vue({
  el: '#app', 
  data: {
    steps: data,
  },
  mounted() {
    var swiper = new Swiper('.swiper-container', {
      //pagination: '.swiper-pagination',
      slidesPerView: 3,
      paginationClickable: true,
      grabCursor: true,
      paginationClickable: true,
      nextButton: '.next-slide',
      prevButton: '.prev-slide',
    });    
  }
})
            </script>

How to add Codepen code my website?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources