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
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>

 

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
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?)

Link to comment
  • 0
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?

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 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

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
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

Link to comment
  • 0
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?

image.thumb.png.95befb2ecbfd3643d47a41b452dfc9b9.png

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
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>

 

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
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;
}
}

 

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 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...

Link to comment
  • 0
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?

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 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>

 

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 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

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 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;
}
}

 

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 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>

 

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/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>

 

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...