Educational Website

Animations and Transitions

Lesson One: Animations

When it comes to designing websites with animations Javascript is perfect for filling in where CSS starts to become lacking. For instance moving along a line using timing functions or an animation on a canvas

<!DOCTYPE html>
                            <html>
                            <style>
                                #box1
                                {
                                    width: 400px;
                                    height: 400px;
                                    position: relative;
                                    background: blue;
                                }
                                #box2
                                {
                                    width: 50px;
                                    height: 50px;
                                    position: absolute;
                                    background-color: brown;
                                }
                            </style>
                            <body>
                                <button onclick="movement()">Click Me!</button>
                                <div id="box1">
                                    <div id="box2"></div>
                                </div>
                                <script>
                                function movement() 
                                {
                                    let id = null;
                                    const elem = document.getElementById("box2");
                                    let pos = 0;
                                    clearInterval(id);
                                    id = setInterval(frame, 5);
                                    function frame()
                                    {
                                        if(pos == 350)
                                        {
                                            clearInterval(id);
                                        }
                                        else
                                        {
                                            pos++;
                                            elem.style.top = pos + "px";
                                            elem.style.left = pos + "px";
                                        }
                                    }
                                }
                                </script>
                            </body>
                            </html>

Lesson Two: Transitions

Transitions are a tool web designers like to use combining aspects of CSS with touch of JavaScript. WHile animating with CSS has limitations it is an important tool in any web designers tool kit.
When applied correctly CSS transitions can make animations and interactions more effectively than most JavaScript libraries

<!DOCTYPE html>
                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
                            <html>
                                
                                <head>
                                    
                                    <div class="animated">
                                        
                                    </div>
                                    <script>
                                        $(document).ready(function(){
                                            $("button").click(function(){
                                                $("div.animated").animate({
                                                    right: '150px' ,
                                                    opacity: 2.0 ,
                                                    height: '100px' ,
                                                    width: '100px'
                                                });
                                            });
                                        });
                                    </script>
                                </head>
                                <body>
                                        <button>Click Me!</button>                               
                                    <div class="animated" style="background:blue;height:50px;width:50px;position:absolute;">
                                    </div>
                                    
                                </body>
                                
                            </html>