Reflection Effect With Text & Image By Coding

Ticker

10/recent/ticker-posts

Reflection Effect With Text & Image By Coding

AK Creative 4/28/2021 12:06:00 PM

 Real Reflection Image Effect By This Source Code


HTML Code


<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <link rel="stylesheet" type="text/css" href="styles.css" />

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" />

    <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" />

  </head>

  <body>

    <section class="swiper-container loading">

      <div class="swiper-wrapper">

        

        <div class="swiper-slide slide1">

          <div class="content">

            <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".5">World Wetlands Day 2nd Feb</p>

            <span class="caption" data-swiper-parallax="-20%">World Wetlands Day is observed every year on February 2. It is celebrated to raise global awareness about the vital role of wetlands for people and our planet. This day also marks the date of the adoption of the Convention on Wetlands on February 2, 1971, in the Iranian city of Ramsar on the shores of the Caspian Sea.</span>

          </div>

        </div>


        <div class="swiper-slide slide2">

          <div class="content">

            <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">World Science Day 10 Nov</p>

            <span class="caption" data-swiper-parallax="-20%">Celebrated every 10 November, World Science Day for Peace and Development highlights the important role of science in society and the need to engage the wider public in debates on emerging scientific issues. It also underlines the importance and relevance of science in our daily lives.</span>

          </div>

        </div>


        <div class="swiper-slide slide3">

         

          <div class="content">

            <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">National Science Day 28 Feb</p>

            <span class="caption" data-swiper-parallax="-20%">National Science Day is celebrated every year on February 28. This day recalls the notable invention "Raman Effect" by India's greatest scientist C V Raman. He was awarded the Nobel Prize for this discovery. Since that day, February 28 is being commemorated as National Science Day to recall the great discovery of CV Raman.</span>

          </div>

        </div>

      

        <div class="swiper-slide slide4">

          <div class="content">

            <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">International Asteroid Day

30 June</p>

            <span class="caption" data-swiper-parallax="-20%">In December 2016 the United Nations General Assembly adopted resolution A/RES/71/90, declaring 30 June International Asteroid Day  in order to "observe each year at the international level the anniversary of the Tunguska impact over Siberia, Russian Federation, on 30 June 1908, and to raise public awareness about the asteroid impact hazard."</span>

          </div>

        </div>


        <div class="swiper-slide slide5">

          <div class="content">

            <p class="title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">National Space Day</p>

            <span class="caption" data-swiper-parallax="-20%">We celebrate National Space Day on the first Friday in May, or on May 7 this year. It was created to inspire all of us in the pursuit of knowledge and progress. There’s so much going on in the universe, it definitely deserves a day to reflect on everything! Though it’s unlikely you’ll be able to celebrate in outer space, you can still take part in your own corner of the universe with our gravity-defying facts, figures, and ideas for getting involved this National Space Day. </span>

          </div>

        </div>

      </div>

    </section>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>

  <script>

    let sliderSelector = '.swiper-container',

        options = {

          loop: true,

          speed:800,

          slidesPerView: 2, // or 'auto'

          spaceBetween: 20,

          centeredSlides : true,

          effect: 'coverflow', // 'cube', 'fade', 'coverflow',

          coverflowEffect: {

            rotate: 50, // Slide rotate in degrees

            stretch: 0, // Stretch space between slides (in px)

            depth: 50, // Depth offset in px (slides translate in Z axis)

            modifier: 1, // Effect multipler

            slideShadows : true // Enables slides shadows

          },

          grabCursor: true,

          parallax: true,

          on: {

            imagesReady: function(){

              this.el.classList.remove('loading');

            }

          }

        };

    let mySwiper = new Swiper(sliderSelector, options);

    mySwiper.init();

  </script>

  </body>

</html>


CSS Code

body {
  width:100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 75vh;
  transition: opacity .6s ease;
}
.swiper-container.swiper-container-coverflow {
  padding-top: 2%;
}
.swiper-slide {
  background-position: bottom;
  background-size: cover;
  height: 50vh !important;
  box-shadow: 1px 3px 3px rgba(0,0,0,0.2);
}
.swiper-slide .content {
  position: absolute;
  top: 40%;
  left: 0;
  width: 40%;
  padding-left: 5%;
  color: #ff0000;
}
.swiper-slide .content .title {
  font-size: 2.6em;
  font-weight: bold;
  margin-bottom: 30px;
}
.swiper-slide .content .caption {
  display: block;
  font-size: 15px;
  line-height: 1.4;
}

.slide1 {
  background-image: url("https://www.birdlife.org/sites/default/files/styles/full_1140x550/public/Ramsar.jpg?itok=PaAmwiLr");
}
.slide2 {
  background-image: url("https://i1.wp.com/www.informationq.com/wp-content/uploads/2019/06/World-Science-Day.jpg?ssl=1");
}
.slide3 {
  background-image: url("https://ebnw.net/wp-content/uploads/2021/02/National-Science-Day.jpg");
}
.slide4 {
  background-image: url("https://s3.ap-southeast-1.amazonaws.com/images.asianage.com/images/aa-Cover-8cncqu22776l1k627vou5n1is4-20190630124134.Medi.jpeg");
}
.slide5 {
  background-image: url("https://www.bestmessage.org/wp-content/uploads/2020/04/space-day-messages.jpg");
}
.swiper-slide::after {
  content:"";
  background-image: inherit;
  background-position: bottom;
  background-size: cover;
  transform:  scaleY(-1);
  width: inherit;
  height:40%;
  position: absolute;
  bottom: -41%;
  opacity: 0.4;
}
.swiper-slide::before {
  z-index: 1;
  content:"";
  width: inherit;
  height:42%;
  position: absolute;
  bottom: -42%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);

}


OUTPUT Screens 





 









Tags:

Post a Comment

17 Comments