Semantic-UI Zoom Transition

Last Updated : 02 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI Transition is an animation that is used to move the webpage content in or out of view using the Semantic UI transition method.

The Semantic UI zoom transition can zoom the webpage element into view from a faraway viewpoint. To add zoom transition to any div or HTML element in the semantic UI, we use the .transition() function with “zoom” parameter. This makes the element zoom in if it is out of the screen and zoom out if it is on screen.

Syntax:

$('.selector').transition('zoom');

Example 1: The following example demonstrates the zoom transition of semantic UI in the h1 element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI zoom transition</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />     
      
</head> 
<style> 
    .demo{ 
        height: 500px; 
        width: 500px; 
        margin-top: 50px; 
        background-color: green; 
        color: white; 
    } 
</style> 
<body> 
      
     <center> 
           
        <h1 class="ui green demo">GeeksforGeeks</h1> 
        <strong>Semantic UI zoom transition</strong><br/> 
        <br/> 
        <button class="button"> transition </button> 
    </center>   
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
             integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <script> 
        $('button').click(function () { 
            $('.demo').transition('zoom'); 
        })         
    </script> 
</body> 
</html> 

Output:

Semantic-UI Zoom Transition

Example 2: The following code demonstrates the zoom transition of semantic UI in the image element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI zoom transition</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
</head> 
<style> 
    .main{ 
        margin-top: 50px; 
    } 
</style> 
<body> 
    <center> 
        <h1 class="ui green">GeeksforGeeks</h1> 
        <strong>Semantic UI zoom transition</strong><br/> 
        <img src= 
    "https://geeksgod.com/wp-content/uploads/2021/06/GeeksforGeeks.png" 
             class="main"/> 
        <img src= 
    "https://geeksgod.com/wp-content/uploads/2021/06/GeeksforGeeks.png" 
             class="main" 
             id="demo"/> 
       <img src= 
    "https://geeksgod.com/wp-content/uploads/2021/06/GeeksforGeeks.png" 
            class="main"/> 
    <br/> 
        <button class="button"> 
            transition 
        </button> 
    </center> 
  
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script>     
    <script> 
        $( document ).ready(function() { 
            $('#demo').transition('zoom'); 
        });  
        $('button').click(function () { 
            $('.main').transition('zoom'); 
        })         
    </script> 
</body> 
</html> 