hello and welcome to red stapler channel in this episode we are going to talk about
the trick to create a 3d effect on website using css and transparent video background
with no javascript at all we are going to recreate the example you are seeing together
in 5 minutes ready let's check it out
normally if we want to put a 3d model on website then using three.js is usually the way to go
however three.js requires some work with javascript and experience with the library
so alternative trick is we are going to render the 3d model into video format with
transparent background and then embed it to the website this is different from using gif image
as gif doesn't support alpha channel which means you can either have a fully transparent
or a pack pixel so effects like fading light shadow or smoke is out of question not to
mention gif only works with low resolution and frame rate so let's start the tutorial
first we need a 3d model if you haven't got one already you can find a free model on
sketchfab website and import it to blender for this tutorial i'll use a blender add-on
to import the model directly to the scene open the sketchfab add-on from the menu
and type the model you need
and click import
then make sure the model is in the view of the scene camera
then press f12 to render
as you can see it's too dark so i will add some light to the scene
you can try experiment with light setup and press f12 to render
okay this looks good next we will work on the animation rendering
we will need a couple setting in order to render transparent video
first go to the render properties and check transparent in film section
next go to the output setting and select ffmpeg video file format
then select webm container and webm video codec
and then select rgba color to enable alpha channel
and that's all we need you can start the animation render from the menu or press ctrl f12
note that you can change the number of the end frame to control the video length
we also need to render the video in mov format to support software
change both container and codec to quicktime and render again
now you should have two videos as the result copy them to your website directory
in html we'll just use the video tag with autoplay mute loop and playsinline option
and link to the video source of both files and that's it
looks good now i'm going to combine this example with css
neon text effect from my previous tutorial so let's add a text tip
and then i will copy css from previous example
you can find a link to the code at the description box below
next i will set the position to absolute
and place it 30% from top then set the z index so that the video is in front of the neon text
then add some keyframe to dim out the light and create a flickering effect
and that's all for this tutorial don't forget to like or subscribe if you love this video
thanks for watching see you next update bye