Skip to main content

Image Vertical Splitting On Hover | HTML, CSS And SplittingJs

by Rustcode
Image-Vertical-Splitting-On-Hover-HTML-CSS-And-SplittingJs-Rustcode

In web development, JavaScript has lots of helpful tools that let developers make cool animations and interactive websites. In this article, we'll discover how to make pictures on a website look special using a JavaScript Plugin called "splittingjs." This plugin makes it easy with a bit of code and a few extra pieces. Let's begin right away!

Read Also:

 

Table Of Contents

Html Structure:

Let's start with the basic layout of an HTML document, shown below.

<!DOCTYPE html>
<html>
<head>
<title>Split Image On Hover (SplittingJs) | Rustcode</title>
</head>
<body>

 main content.

</body>
</html>

SplittingJs Plugin:

We have the basic HTML structure ready, and now we'll add the JavaScript plugin to this HTML document. You can get all the plugins from the links below. To include these links and dependencies in the HTML document, you can use the following code snippet.

Splitting Script: Download

Splitting CSS: Download

Splitting Cell-CSS: Download

<!DOCTYPE html>
<html>
<head>
  <title>Split Image On Hover (SplittingJs)</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/splitting/dist/splitting.css">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/splitting/dist/splitting-cells.css">
</head>

<body>

  main content.
   

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</body>
</html>

Html Content:

We're also adding an image to this design. You can download the image from the GitHub link.

<body>

  <div class="vertical-flip" data-splitting="cells" data-columns="4" data-rows="4" data-image="true">
   <img src="image.jpg" />
 </div>

</body>

  • class="vertical-flip": This assigns a CSS class to the <div>, which is likely used to apply styles and effects to it.

  • data-splitting="cells": This is a custom data attribute (prefixed with "data-") that could be used by JavaScript or CSS to determine how the content inside the <div> should be organized or displayed. In this case, it suggests that the content should be split into cells.

  • data-columns="4" and data-rows="4": These custom data attributes specify that the content should be organized into a grid with 4 columns and 4 rows. This grid layout might be used for positioning and arranging elements within the <div>.

  • data-image="true": This custom data attribute could indicate that an image is present within this <div> and is set to "true," which could be used by scripts or styles to handle the image differently based on its presence.

  • <img src="image.jpg" />: Inside the <div>, there is an <img> element with the src attribute set to "image.jpg", indicating that it displays an image with the file name "image.jpg".

CSS:

html {
  height: 100%;
  display: flex;
}

body {
  margin: auto;
  background: #ECECEC;
}

.vertical-flip {
  perspective: 600px;
  width: 90%;
  height: 80%;
  margin: auto;
}

img {
  width: 90%;
  height: 80%;
  margin: auto;
}

.vertical-flip .cell {
  cursor: pointer;
  transform-style: preserve-3d;
  animation: flip 0.7s cubic-bezier(0.35, 0.33, 0, 1.5);
  animation-delay: calc(0.25s + (0.05s*var(--cell-index)));
  transition: transform 0.7s cubic-bezier(0.35, 0.33, 0, 1.5);
  transition-delay: calc(0.25s + (0.05s*(var(--cell-total) - var(--cell-index))));
}

.vertical-flip:hover .cell {
  transform: rotateX(180deg);
}

@keyframes flip {
  0% {
    transform: rotateX(360deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}

  • html: Sets the HTML element's height to 100% and uses the flex display property.

  • body: Styles the body element by centering its content and giving it a light gray background.

  • .vertical-flip: Defines a class for an element with 3D flipping behavior. It sets the perspective, dimensions, and margins for this element.

  • img: Styles all images by adjusting their width, height, and centering them.

  • .vertical-flip .cell: Styles elements with the class "cell" within elements with the class "vertical-flip." It adds 3D flipping animations, transitions, and a hover effect.

  • .vertical-flip:hover .cell: When hovering over elements with the class "vertical-flip," it triggers a 3D rotation effect on elements with the class "cell."

  • @keyframes flip: Defines a keyframe animation called "flip" that rotates an element from 360 degrees to 0 degrees, creating a flipping effect. This animation is used in the .vertical-flip .cell class.

SCRIPT:

Splitting();

Output:

Youtube Video:

We are sharing a YouTube video from our channel to help you better understand this article and improve your web user interface skills. We have many videos on our YouTube channel about user interface and web development, so you can also learn about web development there.


Source Code

Once you've read this article and watched a source code example, if you want to get the source code, you can download it from here and modify it as you like.

Read Also:

Comments

Post a Comment