One Thing Per Page Design using HTML, CSS, JavaScript and JQuery

Welcome to yet another interesting tutorial in which we will be designing a webpage. The webpage shows a single item in a single view and when scrolled jumps to another item.

Source Code

<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">


<style type="text/css">
  body{
    background:#ddd;
  }
  .box{
    padding-left:50px;
    padding-right:50px;
  }
  .template-wrapper{
    padding-top: 0px;
  }
  .slide{

    padding: 10px;
    margin-bottom: 10px;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .description{
    text-align: justify;
  }
  html {
    scroll-behavior: smooth;
  }
  .image-wrapper img{
    width:100%;
  }
  .main-title{
    font-size: 38px;
      line-height: 50px;
      font-weight: bold;
  }
  .itemlist{
    background-color: #fff;
    padding:30px;
  }

</style>


<?php
  $list = array(
    array(
      'title'=>'Chennai defeat Hyderabad, keep their playoff hopes alive',
      'image'=>'https://letzcricket.com/uploads/news/SxE8UumjTKW4xylS.png',
      'description'=>'Shane Watson and Ambati Rayudu shared an 81-run stand as Chennai Super Kings beat Sunrisers Hyderabad by 20 runs in the Indian Premier League last night. With the win, Chennai has now 6 points from 8 games. Hyderabad also has 6 points from 8 games. Hyderabad is fifth and Chennai is sixth in the points table.'
    ),
    array(
      'title'=>'IPL 2021: Mumbai defeat Rajasthan by 7 wickets',
      'image'=>'https://letzcricket.com/uploads/news/LbJtYf7UAfmqCDtA.jpg',
      'description'=>'Defending champions defeated Rajasthan Royals by 7 wickets to register their third win in the ongoing 14th edition of Vivo Indian Premier League (IPL) on Thursday. Mumbai chased down a target of 172 runs with 7 wickets and 9 balls to spare.'
    ),
    array(
      'title'=>'Dhawan-Shaw starts as Delhi beat Chennai by 7 wickets',
      'image'=>'https://letzcricket.com/uploads/news/rixZxaDhm7fYxEji.png',
      'description'=>'Openers Shikhar Dhawan and Prithvi Shaw shined bright with the bat as Delhi Capitals started their IPL 2021 campaign with an impressive win over Chennai Super Kings on Saturday.'
    ),
    array(
      'title'=>'Stoinis, Rabada guide Delhi to a win over Bangalore',
      'image'=>'https://letzcricket.com/uploads/news/CfdMmHTYvK6ckYnc.png',
      'description'=>'Delhi Capitals (DC) registered a comprehensive victory over Royal Challengers Bangalore (RCB) in the ongoing 13th edition of Indian Premier League (IPL) on Monday. RCB were restricted to 137/9 in 20 overs chasing a target of 197 runs to win eventually handing a 59 run victory to Delhi.'
    ),
    array(
      'title'=>'Bhuvneshwar Kumar to miss rest of IPL',
      'image'=>'https://letzcricket.com/uploads/news/UILlUtNhwRbeeTLH.png',
      'description'=>'Injured fast bowler Bhuvneshwar Kumar is set to miss the rest of the Indian Premier League (IPL) this season. Sunrisers Hyderabad confirmed this on Tuesday. He suffered a thigh injury in the match against Chennai Super Kings in Dubai on Friday.'
    ),
    array(
      'title'=>'Universe Boss Gayle likely to be back on Thursday',
      'image'=>'https://letzcricket.com/uploads/news/VkQppy4Xmbbp6egH.png',
      'description'=>'Kings XI Punjab batsman Chris Gayle is likely to feature in the playing elevenfrom the eighth match of the ongoing Indian Premier League. Punjab has stated that Gayle, who has been sitting on the bench due to stomach problems, is ready to take the field from Thursday.'
    )		
  );
?>

  <div class="template-wrapper">
    <div class="box">
      <div class="list-container" style="transition: all 1s ease 0s;">
        <?php $i=0; foreach($list as $l){ $i++;?>
          <div class="<?php if($i==1){ echo 'active-slide';}?> slide">
            <div class="items itemlist row">
              <figure class="image-wrapper col-md-6">
                <img src="<?php echo $l['image'];?>" alt="<?php echo $l['title'];?>">
              </figure>
              <div class="col-md-6">
                <h1 class="main-title">
                  <?php echo $l['title'];?>
                </h1>
                <br>
                <div class="description-box">
                  <div class="description">
                    <span><?php echo $l['description'];?></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <?php } ?>
      </div>
    </div>
  </div>


<script>
  var running = false;
  
  document.getElementsByClassName('slide')[0].classList.add('active-slide');

  var scrollableElement = document.getElementsByClassName('list-container')[0];

  scrollableElement.addEventListener('wheel', checkScrollDirection);

  function checkScrollDirection(event) {
    event.preventDefault();
    if(!running){
      running = true;
      if (checkScrollDirectionIsUp(event)) {
        prev();
      } else {
        next();
      }
    }
  }

  function next(){
    next_slide = $('.active-slide').next('.slide');
    scrollToView(next_slide);
  }

  function prev(){
    previous_slide = $('.active-slide').prev('.slide');
    scrollToView(previous_slide);
  }

  function scrollToView(element){
    if(element.length>0){
      $(".active-slide").removeClass('active-slide');
      element.addClass('active-slide');
      $('html, body').animate({
        scrollTop: $(element).offset().top-20
      });
      setTimeout(function(){
        running = false;
      },800);
    }
  }

  function checkScrollDirectionIsUp(event) {
    if (event.wheelDelta) {
      return event.wheelDelta > 0;
    	}
    	return event.deltaY < 0;
  }

  document.onkeydown = checkKey;

  function checkKey(e) {

      e = e || window.event;

      if (e.keyCode == '38') {
          prev();
      }
      else if (e.keyCode == '40') {
          next();
      }
      else if (e.keyCode == '37') {
         prev();
      }
      else if (e.keyCode == '39') {
         next();
      }
      else if(e.keyCode === 34){
     		next();
        }
        else if(e.keyCode === 33){
     		prev();
        }

  }

  scrollToView($('.active-slide'));
</script>

 

Follow this video for complete guidance :