Frontend Forever

Holographic Effect Animation

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Holographic Effect Animation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

I'm going to demonstrate how to create holographic effects on a laptop using HTML and CSS today.

Hologram

A hologram is a real-world recording of an interference pattern that duplicates a 3D light field through diffraction, giving rise to an image that retains the depth, parallax, and other characteristics of the original scene.

The art and science of creating holograms is called holography. Instead of an image created by a lens, a hologram is a photographic recording of a light field. When viewed under diffuse ambient light, the holographic medium, such as the item created by a holographic process (which is sometimes referred to as a hologram), is typically incomprehensible. A difference in the opacity, density, or surface profile of the photographic medium is used to encode the light field as an interference pattern. When properly lighted, the interference pattern diffracts the light into a faithful representation of the original light field, and the objects that were in it display realistically changing visual depth cues like parallax and perspective as a result of the various viewing angles.

Holography requires a laser light in order to observe the finished hologram as well as to illuminate the topic in its purest form. The whole scene that was recorded may be replicated in microscopic detail. In order to observe the hologram and, in some situations, create it without the requirement for laser illumination, significant image quality concessions are typically needed. In order to avoid using potentially lethal high-powered pulsed lasers to optically "freeze" moving people as precisely as the extremely motion-intolerant holographic recording process required, holographic portraiture frequently turns to a non-holographic intermediate imaging technique. Today, holograms can even depict inexistent objects or settings fully using computer-generated imagery.

Holography differs from other autostereoscopic 3D display methods like lenticular and others that use standard lens imaging yet can generate visually comparable effects. Holograms are sometimes used improperly to describe visuals that require the use of special glasses or other intermediate optics, stage illusions like Pepper's Ghost, and other peculiar, puzzling, or seemingly miraculous visions.

In 1947, Dennis Gabor created holography, for which he later received the Nobel Prize.

STEPS TO CREATE :

Making a new file with the name "holoeffects.html"
Download all of the photos I'm providing in the area below.
Add each image to the HTML file.
Give each image a different style.
Changing the size of each image of the HTML file with some CSS animations
Start coding after watching my tutorial.
Here is a link to the tutorial: https://youtu.be/nuNWz twSqc
This animation must now be completed.
I hope this tutorial was informative for you.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container{
	width: 100%;
	height: 100vh;
}
.rect{
	width: 43%;
	height: 40vh;
	background: black;
	position: absolute;
	left: 35%;
	top: 18%;
	transform-style: preserve-3d;
	transform: perspective(3000px) rotateY(-50deg) rotateZ(7deg) rotateX(3deg);
	z-index: 1;
}
img:nth-child(1){
	width: 50%;
	height: 100vh;
	position: absolute;
	left: 25%;
}
img:nth-child(2){
	width: 42%;
	height: 40vh;
	position: absolute;
	left: 35%;
	top: 18%;
	transform-style: preserve-3d;
	transform: perspective(3000px) rotateY(-50deg) rotateZ(7deg) rotateX(3deg);
	z-index: 1;
	transition: .5s;
}
img:nth-child(3){
	width: 42%;
	height: 40vh;
	position: absolute;
	left: 35%;
	top: 18%;
	transform-style: preserve-3d;
	transform: perspective(2000px) rotateY(-50deg) rotateZ(7deg) rotateX(4deg);
	z-index: 1;
	transition: .5s;
}
img:nth-child(4){
	width: 43%;
	height: 40vh;
	position: absolute;
	left: 35%;
	top: 18%;
	transform-style: preserve-3d;
	transform: perspective(3000px) rotateY(-50deg) rotateZ(7deg) rotateX(3deg);
	z-index: 1;
	transition: .5s;
}
.images:hover img:nth-child(4){
	transform-style: preserve-3d;
	position: absolute;
	top: 15%;
	transform: perspective(3000px) translateX(-250px) rotateX(3deg) rotateY(-50deg) rotateZ(9deg);
	transition: .5s;
}
.images:hover img:nth-child(3){
	transform-style: preserve-3d;
	position: absolute;
	top: 14%;
	transform: perspective(3000px) translateX(-120px) rotateX(3deg) rotateY(-50deg) rotateZ(9deg);
	transition: .5s;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Holographic Effect Animation

About this Code

Hologram

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever