Categories
CSS Web development

CSS scroll-behavior Property

CSS scroll-behavior Property

The CSS scroll-behavior property defines whether to smoothly animate the scroll position, instead of a straight jump (default), when the user clicks on a link within a scrolling box.

Syntax:

scroll-behavior: auto|smooth;

auto (default) – a straight jump/ scroll effect between elements within the scrolling box.

smooth – a smooth transition/ scrolling effect between elements within the scrolling box.

Demo:

You can add the CSS scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page, or you can add it to a specific scroll container:

<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
  scroll-behavior: smooth;
}

#part1 {
  height: 300px;
  background-color: #e76f51;
}

#part2 {
  height: 300px;
  background-color: #2a9d8f;
}

.link1, .link2 {
  text-decoration: none;   
  background-color: #e9c46a;
  padding:10px;
  margin-left:15px;
  color: #264653;
}

</style>
</head>
<body>

<div class="wrap">
<div class="main" id="part1">
  <h3>Part 1</h3>
  <a class="link1" href="#part2">Click Me to Smooth Scroll to Part 2 below.</a>
</div>

<div class="main" id="part2">
  <h3>Part 2</h3>
  <a class="link2" href="#part1">Click Me to Smooth Scroll to Part 1.</a>
</div>
    </div>


</body>
</html>

Output:


Enjoy coding!

Categories
CSS HTML JavaScript Web development

Scroll To Top Button (smooth scroll effect)

smooth scroll effect

To learn how to create the Button – Scroll To Top with the smooth scroll effect, follow the steps below:

Demo:

Step1.

Add HTML

Create the text container and add some text and the button:

<div class="content">
<div class="text"><h1 class="heading">Scroll Down</h1>
<p>He  was  an  old  man  who  fished  alone  in  a  skiff  in  the  Gulf  Stream  and  he  had  gone  eighty-four days now without taking a fish. In the first forty days a boy had been with him. But  after  forty  days  without  a  fish  the  boy’s  parents  had  told  him  that  the  old  man  was  now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at  their  orders  in  another  boat  which  caught  three  good  fish  the  first  week.  It  made  the  boy  sad  to  see  the  old  man  come  in  each  day  with  his  skiff  empty  and  he  always  went  down to help him carry either the coiled lines  or  the  gaff  and  harpoon  and  the  sail  that  was  furled  around  the  mast.  The  sail  was  patched  with  flour  sacks and, furled, it looked like the flag of permanent defeat.   The  old  man  was  thin  and  gaunt  with  deep  wrinkles  in  the  back  of  his  neck.  The  brown blotches of the benevolent skin cancer the sun brings from its [9] reflection on the tropic  sea  were  on  his  cheeks.  The  blotches  ran  well  down  the  sides  of  his  face  and  his  hands  had  the  deep-creased  scars  from  handling  heavy  fish  on  the  cords.  But  none  of  these scars were fresh. They were as old as erosions in a fishless desert.   Everything  about  him  was  old  except  his  eyes  and  they  were  the  same  color  as  the  sea and were cheerful and undefeated.   “Santiago,”  the  boy  said  to  him  as  they  climbed  the  bank  from  where  the  skiff  was  hauled up. “I could go with you again. We’ve made some money.”   The old man had taught the boy to fish and the boy loved him.   “No,” the old man said. “You’re with a lucky boat. Stay with them.”   “But remember how you went eighty-seven days without fish and then we caught big ones every day for three weeks.”   
  </p>
<p>“I remember,” the old man said. “I know you did not leave me because you doubted.”   “It was papa made me leave. I am a boy and I must obey him.”   “I know,” the old man said. “It is quite normal.”   “He hasn’t much faith.”   [10] “No,” the old man said. “But we have. Haven’t we?”   “Yes,”  the  boy  said.  “Can  I  offer  you  a  beer  on  the  Terrace  and  then  we’ll  take  the  stuff  home.”    “Why not?” the old man said. “Between fishermen.”   They sat on the Terrace and many of the fishermen made fun of the old man and he was noteangry. Others, of the older fishermen, looked at him and were sad. But they did not  show  it  and  they  spoke  politely  about  the  current  and  the  depths  they  had  drifted  their  lines  at  and  the  steady  good  weather  and  of  what  they  had  seen.  The  successful  fishermen  of  that  day  were  already  in  and  had  butchered  their  marlin  out  and  carried  them laid full length across two planks, with two men staggering at the end of each plank, to  the  fish  house  where  they  waited  for  the  ice  truck  to  carry  them  to  the  market  in  Havana. Those who had caught sharks had taken them to the shark factory on the other side of the cove where they were hoisted on a block and tackle, their livers removed, their fins cut off and their hides skinned out and their flesh cut into strips for salting.   When  the  wind  was  in  the  east  a  smell  came  across  the  harbour  from  the  shark  factory;  but  today  there  [11]  was  only  the  faint  edge  of  the  odour  because  the  wind  had  backed into the north and then dropped off and it was pleasant and sunny on the Terrace.</p>
  <p>“Santiago,” the boy said. “Yes,” the old man said. He was holding his glass and thinking of many years ago.   “Can I go out to get sardines for you for tomorrow?”   “No. Go and play baseball. I can still row and Rogelio will throw the net.”   “I would like to go. If I cannot fish with you. I would like to serve in some way.”   “You bought me a beer,” the old man said. “You are already a man.”   “How old was I when you first took me in a boat?”   “Five and you nearly were killed when I brought the fish in too green and he nearly tore the boat to pieces. Can you remember?”   “I  can  remember  the  tail  slapping  and  banging  and  the  thwart  breaking  and  the  noise of the clubbing. I can remember you throwing me into the bow where the wet coiled lines  were  and  feeling  the  whole  boat  shiver  and  the  noise  of  you  clubbing  him  like  chopping a tree down and the sweet blood smell all over me.”   [12] “Can you really remember that or did I just tell it to you?”</p>
</div>
<button onclick='window.goUp({top: 0, behavior: "smooth"});' id="top">Top</button>
  </div>

Step2.

Add CSS

Set the position of the background and elements:

body {
  display: flex;
  justify-content: center;
}

.content {
  position: relative;
  display: flex;
  justify-content: center;
}

Style the text:

.heading {
  text-align: center;
  position: relative;
}

.text {
  width:50%;
  font-size: 20px;
  padding: 20px 50px;
}

Style the button:

#top {
  position: fixed;
  bottom: 40px;
  background-color: #264653;
  padding: 20px;
  border-radius: 20px;
  border: none;
  color: white;
  font-weight: bold;
  left:80%;
  cursor: pointer;
  display: none;
  transition: .2s;
}

#top:hover {
  background-color: #2a9d8f;
}

#top:active {
  background-color: #e76f51;
}

Add CSS @media rule (to display text and the effect on the small screens):

@media only screen and (max-width: 600px) {
  .text {
    font-size: 15px;
  }
}

Step3.

Add JavaScript

const button = document.getElementById("top");

window.onscroll = function() {showButton()};

function showButton() {
  if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}

function goUp() {
window.scrollTo({top: 0, behavior: 'smooth'});
}

Enjoy coding!

Categories
CSS Web development

CSS Parallax Scrolling Effect

CSS Parallax Scrolling Effect

To learn how to create the CSS Parallax Scrolling Effect follow the steps below:

Demo:

Step1.

Add HTML

<div class="image-1">
  <div class="text">
      <span class="background">Scroll Down⬇</span>
  </div>
</div>

<div class="main">
  <h3>TULIPS</h3>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est urna, malesuada sollicitudin tempus non, rutrum eu diam. Suspendisse vitae lobortis ante, sit amet venenatis erat. Nulla sollicitudin placerat sapien id aliquam. Fusce malesuada, est at venenatis sagittis, nulla risus elementum neque, sit amet varius odio sem eget libero. Cras scelerisque ex lectus, vel molestie arcu tristique vulputate. Nunc fringilla suscipit massa. Praesent nulla sem, aliquam et molestie id, eleifend ac nunc. Aliquam augue odio, porta sed lacinia non, iaculis sed lorem. Proin pulvinar ex quis turpis pulvinar fringilla. Ut a risus dictum velit consequat consectetur ut eu nulla. Phasellus a convallis velit. Sed fermentum justo at justo semper, ut semper velit porta. Phasellus luctus est quam, id pulvinar urna consectetur ut. Mauris tristique erat ut risus varius placerat. Vivamus dui arcu, vulputate et mi nec, eleifend rhoncus nunc.
</p>
</div>

<div class="image-2">
  <div class="text">
  <span class="background">Tulip Festival</span>
  </div>
</div>

<div class="someText">
  <div style="background-color:#333;text-align:center;padding:50px 80px;text-align: justify;">
  <p>Scroll up and down to see how Parallax Scrolling works.</p>
  </div>
</div>

<div class="image-3">
  <div class="text">
  <span class="background">Scroll Up⬆</span>
  </div>
</div>

<div class="someText">
  <div style="background-color:#333;text-align:center;padding:50px 80px;text-align: justify;">
  <p>Scroll up and down to see how Parallax Scrolling works.</p>
  </div>
</div>

<div class="image-1">
  <div class="text">
  <span class="background">Thanks!</span>
  </div>
</div>

Step2.

Add CSS

Use the background-attachment: fixed to create the parallax effect:

body, html {
  height: 100%;
  margin: 0;
  font-family: tahoma;
  letter-spacing:2px;
  color: #333;
}

.image-1, .image-2, .image-3 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
}
.image-1 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/1a-1024x576.jpg");
  min-height: 100%;
}

.image-2 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/2a-1024x576.jpg");
  min-height: 450px;
}

.image-3 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/3a-1024x576.jpg");
  min-height: 450px;
}

.text {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #333;
}

.text .background {
  background-color: #000;
  border-radius:20px;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.main {
  color: #333;
  background-color:#fff;
  text-align:center;
  text-align: justify;
  padding:60px 90px;
}

h3 {
  letter-spacing: 5px;
  font-size: 20px;
  font-family: tahoma;
  color: #333;
  text-align:center;
}

.someText {
  position:relative;
  color: #fff;
}

Add @CSS media rule (the parallax effect won’t work on small screens):

@media only screen and (max-device-width: 1024px) {
  .image-1, .image-2, .image-3 {
    background-attachment: scroll;
  }
}

Enjoy coding!

Categories
CSS HTML Web development

How to change the CSS Gradient Background On Scroll?

CSS Gradient Background

Demo:

To create the CSS Gradient Background On Scroll follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<h2 style="position:fixed;">Scroll to see the effect.</h2>

Step2.

Add CSS

body {
  height: 5000px;
  justify-content: center;
  display: flex;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);   
}

h2 {
  color: white;
  text-shadow: 1px 1px 1px black;
  left:45%;
}

Enjoy coding!

Categories
#SVG Web development

SVG Draw on Scroll

SVG Draw on Scroll

Using SVG and JavaScript to draw a heart on scroll. Note that it has to be a <path> element:

Demo:

Step1.

Add HTML

Get a SVG path

To make this animation working it has to be a path (any other of SVG elements won’t work).

To create an animation I drew a path (heart) in Adobe Illustrator. To read more about SVG and learn how to create a SVG file click here and here.

<div class="container">
<div class="text"><h1>Scroll to draw</h1></div>
  
  
<svg id="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.43 311.23"><defs><style>.heart{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path id="heart1" class="heart" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>
  
</div>

Step2.

Add CSS

body {
  background: linear-gradient(141deg, #f0f3bd 0%, #02c39a 51%, #00a896 75%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5000px;
  
}

.container {
  position: relative; 
}

svg {
  stroke-width: 2px;
  position: fixed;
  width: 200px;
  height: auto;
  margin:0;
  top: 30%;
  left: 45%;
}

.text {
  position: absolute;
  top:-2500px;
  display: block;
  color: white;
  width:400px;
  left:-100px;
  text-shadow: 1px 1px 1px black;
}

Step3.

Add JavaScript

const svg = document.getElementById("heart1");
const length = svg.getTotalLength();


svg.style.strokeDasharray = length;

svg.style.strokeDashoffset = length;

window.addEventListener("scroll", function () {
  const scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  const draw = length * scrollpercent;

  svg.style.strokeDashoffset = length - draw;

});

Enjoy coding!