Chernobyl Jumping Control Rods HTML and CSS Tutorial

Chernobyl Jumping Control Rods HTML and CSS Tutorial


hello and welcome to red stapler channel
in this tutorial we are going to show you how I created an animated 3d mini
RBMK nuclear reactor core using just HTML and CSS ready let’s check it out so
first let’s start with the control rod I’m going to create divs for three sides
top front and left the other sides are not visible so I will leave them then we
will use the same technique with previous tutorial on how to create 3d
progress bar where you CSS transform on each side to create 3d shape I’m going to set the top side color to
blue as working in 3d can be confusing we replace it with real texture later then after our sites were set up we’ll
rotate the core and create a 3d perspective view now the control rods
outline in octagon shape the grid layout is perfect for this job
there are lots of online tools that could dramatically save your time for
creating complex grid area in this tutorial we will use grid layout it’s
calm we will create five grid areas to create an octagon shape then for each
grid area we will set rows and columns accordingly looks good let’s get the code we will
copy these into our page we will need to place the control rods into each grid
area according to the layout we offset next to a copy the CSS we also need to add preserve-3d
transform style to every grid area to keep the 3d transform effect also add
great gap for spacing between rods Next I’ll add a core cover you see that adding new div messed up the grid layout this because our grid template is using fraction units so it
dynamically adjust the size according to the container width and height we can
fix this by change them to pixel next we use clip-path property to change the
cover into an octagon shape again there is a tool for this job Clippy is one of
the best clip-path maker that I use pretty often just pick the shape and copy
the code I will also add a shadow to create depth next I’ll add an another div
to create a floor I will also add box-shadow to create
depth now you will see that our square shape is having some skewing effect
this because we haven’t set a perspective distant yet so let’s set it
to 2,000 pixel also change the background color if you look at a real
RBMK core you will see that there is some color marked rod so I’m going to use Photoshop to create basic texture and put them into the project then create
class for each color and apply them to the rods finally we will create a shaking
animation which can be done easily using translateZ I will create 3
different levels of shaking then apply them randomly to rods and that’s all for this tutorial hope
you guys enjoy if you like this video don’t forget to like or subscribe to our
Channel thanks for watching and see you next
time bye

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
    Jakob Icke

    Shit, that's tasteless. Thousands of people have died because of the accident and you are trying to generate clicks. O_o fuck!

  13. Post
    Author
    The sejo.

    You can make a video using a 3d character that moves with on the keyboard
    puedes hacer un vídeo usando un personaje 3d que se mueva con en el teclado.

  14. Post
    Author
  15. Post
    Author
    Kaybe - Cryptosphere

    Is it possible to make the moving Control Rods to links?
    I tried with the
    – <a> tag, but thats not working.
    Then i tried Jquery with this:

    $('.link').on('click', function () {

    window.location = 'http://example.com';

    });
    Also not working.
    – also not working: <div onclick="location.href='url'">content</div>
    Anyone an idea?

  16. Post
    Author
  17. Post
    Author
  18. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *