Cool Effects for Website - Cody Paste https://www.codypaste.com/category/html-2/cool-effect/ THE WEB PLAYGROUND Sat, 24 Aug 2024 08:25:22 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 https://www.codypaste.com/wp-content/uploads/2022/12/cropped-codypaste-32x32.png Cool Effects for Website - Cody Paste https://www.codypaste.com/category/html-2/cool-effect/ 32 32 Product Zoom Gallery for e-commerce https://www.codypaste.com/product-gallery-for-e-commerce/ https://www.codypaste.com/product-gallery-for-e-commerce/?noamp=mobile#respond Sat, 24 Aug 2024 07:56:52 +0000 https://www.codypaste.com/?p=1161 e-commerce product zoom gallery https://codepen.io/hckkiu/pen/poyoRKQ https://codepen.io/danielhuangg/pen/xqaMrM https://codepen.io/ZowWeb/pen/xxGLrjp https://codepen.io/exclutips/pen/LYEeEjZ

The post Product Zoom Gallery for e-commerce appeared first on Cody Paste.

]]> e-commerce product zoom gallery

  1. https://codepen.io/hckkiu/pen/poyoRKQ
  2. https://codepen.io/danielhuangg/pen/xqaMrM
  3. https://codepen.io/ZowWeb/pen/xxGLrjp
  4. https://codepen.io/exclutips/pen/LYEeEjZ

The post Product Zoom Gallery for e-commerce appeared first on Cody Paste.

]]> https://www.codypaste.com/product-gallery-for-e-commerce/feed/ 0 Generate Proforma Invoice (FREE) https://www.codypaste.com/generate-free-proforma-invoice/ https://www.codypaste.com/generate-free-proforma-invoice/?noamp=mobile#respond Sat, 07 Jan 2023 08:38:41 +0000 https://www.codypaste.com/?p=869 It is Easy to generate Proforma Invoice Online, Just click and edit the detail and amount and then click on ‘Generate Invoice’, You will get a PDF File of your invoice.   Please watch the video below : Generate Now

The post Generate Proforma Invoice (FREE) appeared first on Cody Paste.

]]> It is Easy to generate Proforma Invoice Online, Just click and edit the detail and amount and then click on ‘Generate Invoice’, You will get a PDF File of your invoice.

 

Please watch the video below :

Generate Now

The post Generate Proforma Invoice (FREE) appeared first on Cody Paste.

]]> https://www.codypaste.com/generate-free-proforma-invoice/feed/ 0 Twitter Feed API https://www.codypaste.com/twitter-feed-api/ https://www.codypaste.com/twitter-feed-api/?noamp=mobile#respond Mon, 01 May 2017 12:02:04 +0000 http://www.codypaste.com/?p=590 Go to https://apps.twitter.com/ and create App [crayon-69ab967a49977728104338/]  

The post Twitter Feed API appeared first on Cody Paste.

]]> Go to https://apps.twitter.com/ and create App

<?php
    function buildBaseString($baseURI, $method, $params) {
        $r = array();
        ksort($params);
        foreach($params as $key=>$value){
            $r[] = "$key=" . rawurlencode($value);
        }
        return $method."&" . rawurlencode($baseURI) . '&' . rawurlencode(implode('&', $r));
    }

    function buildAuthorizationHeader($oauth) {
        $r = 'Authorization: OAuth ';
        $values = array();
        foreach($oauth as $key=>$value)
            $values[] = "$key=\"" . rawurlencode($value) . "\"";
        $r .= implode(', ', $values);
        return $r;
    }

    $url = "https://api.twitter.com/1.1/statuses/user_timeline.json";

    $oauth_access_token = "your access token goes here";
    $oauth_access_token_secret = "your access token secret goes here";
    $consumer_key = "your consumer key goes here";
    $consumer_secret = "your consumer secret goes here";

    $oauth = array( 'oauth_consumer_key' => $consumer_key,
                    'oauth_nonce' => time(),
                    'oauth_signature_method' => 'HMAC-SHA1',
                    'oauth_token' => $oauth_access_token,
                    'oauth_timestamp' => time(),
                    'oauth_version' => '1.0');

    $base_info = buildBaseString($url, 'GET', $oauth);
    $composite_key = rawurlencode($consumer_secret) . '&' . rawurlencode($oauth_access_token_secret);
    $oauth_signature = base64_encode(hash_hmac('sha1', $base_info, $composite_key, true));
    $oauth['oauth_signature'] = $oauth_signature;

    // Make requests
    $header = array(buildAuthorizationHeader($oauth), 'Expect:');
    $options = array( CURLOPT_HTTPHEADER => $header,
                      //CURLOPT_POSTFIELDS => $postfields,
                      CURLOPT_HEADER => false,
                      CURLOPT_URL => $url,
                      CURLOPT_RETURNTRANSFER => true,
                      CURLOPT_SSL_VERIFYPEER => false);

    $feed = curl_init();
    curl_setopt_array($feed, $options);
    $json = curl_exec($feed);
    curl_close($feed);

    $twitter_data = json_decode($json);

//print it out
print_r ($twitter_data);

?>

<?php echo $twitter_data[0]->text; ?><br />
Created: <?php echo $twitter_data[0]->created_at; ?>
<br /><br />
<?php echo $twitter_data[1]->text; ?><br />
Created: <?php echo $twitter_data[1]->created_at; ?>
<br /><br />
<?php echo $twitter_data[2]->text; ?><br />
Created: <?php echo $twitter_data[2]->created_at; ?>
<br /><br />

 

The post Twitter Feed API appeared first on Cody Paste.

]]> https://www.codypaste.com/twitter-feed-api/feed/ 0 DIV Scrollbar Style https://www.codypaste.com/div-scrollbar-style/ https://www.codypaste.com/div-scrollbar-style/?noamp=mobile#respond Thu, 28 Jul 2016 09:19:17 +0000 http://www.codypaste.com/?p=500 CSS3 – Webkit – Vertical Scrollbars. Create fancy vertical scrollbar of DIV with style. used only CSS for DIV scrollbar Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body>) and do totally rad things. IE …

read more "DIV Scrollbar Style"

The post DIV Scrollbar Style appeared first on Cody Paste.

]]> CSS3 – Webkit – Vertical Scrollbars.

Create fancy vertical scrollbar of DIV with style. used only CSS for DIV scrollbar

Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body>) and do totally rad things. IE dropped that.

These days, customizing scrollbars is back, but it’s WebKit this time. It’s a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the “Shadow DOM”.

Source: http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/

 

CSS:

header
{
	font-family: 'Lobster', cursive;
	text-align: center;
	font-size: 25px;	
}

#info
{
	font-size: 18px;
	color: #555;
	text-align: center;
	margin-bottom: 25px;
}

a{
	color: #074E8C;
}

.scrollbar
{
	margin-left: 30px;
	float: left;
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.force-overflow
{
	min-height: 450px;
}

#wrapper
{
	text-align: center;
	width: 500px;
	margin: auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
	background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
	background-color: #000000;
	border: 2px solid #555555;
}


/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb
{
	background-color: #0ae;
	
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                   color-stop(.5, rgba(255, 255, 255, .2)),
					   color-stop(.5, transparent), to(transparent));
}


/*
 *  STYLE 6
 */

#style-6::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-7::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track
{
	border: 1px solid black;
	background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
	background-color: #000000;	
}


/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
	background-color: #AAA;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(0, 0, 0, .2) 50%,
											  rgba(0, 0, 0, .2) 75%,
											  transparent 75%,
											  transparent)
}


/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-11::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-11::-webkit-scrollbar-thumb
{
	background-color: #3366FF;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(0deg,
	                                          rgba(255, 255, 255, 0.5) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, 0.5) 50%,
											  rgba(255, 255, 255, 0.5) 75%,
											  transparent 75%,
											  transparent)
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #444444;
}

#style-12::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-12::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
	background-color: #FFF;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, 1) 0%,
											  rgba(0, 0, 0, 1) 25%,
											  transparent 100%,
											  rgba(0, 0, 0, 1) 75%,
											  transparent)
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#4D9C41),
									   to(#19911D),
									   color-stop(.6,#54DE5D))
}

/*
 *  STYLE 16
 */

#style-16::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-16::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-16::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-linear-gradient(top,
											  #e4f5fc 0%,
											  #bfe8f9 50%,
											  #9fd8ef 51%,
											  #2ab0ed 100%);
}

 

 

HTML:

<div id="wrapper">
    <div class="scrollbar" id="style-default">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-1">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-2">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-3">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-4">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-5">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-6">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-7">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-8">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-9">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-10">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-11">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-13">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-14">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-15">
      <div class="force-overflow"></div>
    </div>

 

The post DIV Scrollbar Style appeared first on Cody Paste.

]]> https://www.codypaste.com/div-scrollbar-style/feed/ 0 Fullscreen HTML5 Page Background Video https://www.codypaste.com/fullscreen-html5-page-background-video/ https://www.codypaste.com/fullscreen-html5-page-background-video/?noamp=mobile#respond Tue, 26 Jul 2016 07:57:23 +0000 http://www.codypaste.com/?p=495 HTML5 video compatibility is really high. In fact, it’s supported in all modern browsers (> IE8). The inner workings of video in general can be complicated, especially when you start to dig into multiple formats, tracks, containers, and the works. Play video in background of HTML5. Source: https://codepen.io/dudleystorey/pen/knqyK WCAG general accessibility recommendation is that media …

read more "Fullscreen HTML5 Page Background Video"

The post Fullscreen HTML5 Page Background Video appeared first on Cody Paste.

]]> HTML5 video compatibility is really high. In fact, it’s supported in all modern browsers (> IE8). The inner workings of video in general can be complicated, especially when you start to dig into multiple formats, tracks, containers, and the works.

Play video in background of HTML5.

Source: https://codepen.io/dudleystorey/pen/knqyK

WCAG general accessibility recommendation is that media such as background video play through only once.

HTML:

<video autoplay  poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop>
  <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>Polina</h1>
<p>filmed by Alexander Wagner 2011
<p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>

 

CSS:

body {
  margin: 0;
  background: #000; 
}
video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
   opacity: .5;
}

#polina { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 33%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;
}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}
#polina button { 
  display: block;
  width: 80%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#polina button:hover { 
   background: rgba(0,0,0,0.5);
}

a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  padding: .5rem;
  transition: .6s background; 
}
a:hover{
  background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) { 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(//demosthenes.info/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}

 

JS:

var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");

function vidFade() {
  vid.classList.add("stopfade");
}

vid.addEventListener('ended', function()
{
// only functional if "loop" is removed 
vid.pause();
// to capture IE10
vidFade();
}); 


pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = "Pause";
  } else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
  }
})

 

The post Fullscreen HTML5 Page Background Video appeared first on Cody Paste.

]]> https://www.codypaste.com/fullscreen-html5-page-background-video/feed/ 0 Parallax theme Bootstrap & Cool animations https://www.codypaste.com/parallax-theme-bootstrap/ https://www.codypaste.com/parallax-theme-bootstrap/?noamp=mobile#respond Thu, 30 Jun 2016 04:48:50 +0000 http://www.codypaste.com/?p=463 https://mobirise.com/bootstrap-template/slider.html http://bootsnipp.com/tags/sidebar (Responsive Sidebar) http://codepen.io/Hornebom/pen/clDsr (Bulb on/off) http://ianlunn.github.io/Hover/ (button transform, 2D) http://tympanus.net/Development/PerspectivePageViewNavigation/index6.html (responsive page with menu, cool) http://cssdeck.com/labs/css-side-menu (Mobile menu) http://codepen.io/juslwk/pen/xgbDB (Circle Menu) http://codepen.io/chriscoyier/pen/yqHxB (Text Glitch Effect) https://davidwalsh.name/codepen-demos (Cool Mouse Pointer) http://jsfiddle.net/opherv/ddGHz/ (Rotate on mouse coordinator) http://jsfiddle.net/JqBZb/ (rotate circle on mouse location) https://api.jquery.com/mousemove/ (X Y reading on mouse move) http://codepen.io/wontem/pen/PqYXop (tech circle roatation) Sliders

The post Parallax theme Bootstrap & Cool animations appeared first on Cody Paste.

]]>
  • https://mobirise.com/bootstrap-template/slider.html
  • http://bootsnipp.com/tags/sidebar (Responsive Sidebar)
  • http://codepen.io/Hornebom/pen/clDsr (Bulb on/off)
  • http://ianlunn.github.io/Hover/ (button transform, 2D)
  • http://tympanus.net/Development/PerspectivePageViewNavigation/index6.html (responsive page with menu, cool)
  • http://cssdeck.com/labs/css-side-menu (Mobile menu)
  • http://codepen.io/juslwk/pen/xgbDB (Circle Menu)
  • http://codepen.io/chriscoyier/pen/yqHxB (Text Glitch Effect)
  • https://davidwalsh.name/codepen-demos (Cool Mouse Pointer)
  • http://jsfiddle.net/opherv/ddGHz/ (Rotate on mouse coordinator)
  • http://jsfiddle.net/JqBZb/ (rotate circle on mouse location)
  • https://api.jquery.com/mousemove/ (X Y reading on mouse move)
  • http://codepen.io/wontem/pen/PqYXop (tech circle roatation)

    • Sliders

    The post Parallax theme Bootstrap & Cool animations appeared first on Cody Paste.

    ]]>     https://www.codypaste.com/parallax-theme-bootstrap/feed/ 0     Easy Page Preloader https://www.codypaste.com/easy-page-preloader/ https://www.codypaste.com/easy-page-preloader/?noamp=mobile#respond Tue, 03 May 2016 18:04:19 +0000 http://www.codypaste.com/?p=416 Easy Page Preloader in HTML/HTML5.   Now a days every websites are powered by Preloader. It will add interactivity to a webpage with some sort of animations.  Today I am going to tell how to create a simple jQuery Preloader with 2 lines of jQuery code & few lines of CSS code.       …

    read more "Easy Page Preloader"

    The post Easy Page Preloader appeared first on Cody Paste.

    ]]>     Easy Page Preloader in HTML/HTML5.

     

    Now a days every websites are powered by Preloader. It will add interactivity to a webpage with some sort of animations.  Today I am going to tell how to create a simple jQuery Preloader with 2 lines of jQuery code & few lines of CSS code.

     

     

     

    Before </head>:

    <script type="text/javascript">
  
  //Function to hide the loading div
  function loadingDivHide()
  {
      document.getElementById("loading_div").style.display = "none";
      document.getElementById("content_area_div").style.display = "";
  }
  
  </script>
<style type="text/css">
     .loaderClass
     {
        position: absolute;
        top: 50%;
        left: 0px;
        z-index: 999999;
        text-align: center;
        width: 100%;
        height: 200px
        
        
     }
</style>

    HTML:

    <body onload="loadingDivHide()">

<div id="loading_div" class="loaderClass">
<img src="ajax-loader.gif" height="66" width="66"><br>
<h1>Loading...</h1>
</div>

<div id="content_area_div" style="display:none">

<!-- Page content goes here -->

</div>

</body>

     

    The post Easy Page Preloader appeared first on Cody Paste.

    ]]>     https://www.codypaste.com/easy-page-preloader/feed/ 0     Bootstrap toggle menu screen overlay https://www.codypaste.com/404-2/ https://www.codypaste.com/404-2/?noamp=mobile#respond Mon, 25 Apr 2016 04:43:10 +0000 http://www.codypaste.com/?p=404 Bootstrap toggle menu screen overlay. 1. Load the jQuery MenuPuncher plugin’s JS and CSS in the project. 2. Create a list of links for the navigation menu. 3. Create a link to toggle the navigation menu. 4. Call the plugin on document ready. 5. Default settings to customize the fullscreen navigation menu.     index.html …

    read more "Bootstrap toggle menu screen overlay"

    The post Bootstrap toggle menu screen overlay appeared first on Cody Paste.

    ]]>     Bootstrap toggle menu screen overlay.

    1. Load the jQuery MenuPuncher plugin’s JS and CSS in the project.

    2. Create a list of links for the navigation menu.

    3. Create a link to toggle the navigation menu.

    4. Call the plugin on document ready.

    5. Default settings to customize the fullscreen navigation menu.

     

     

    index.html

    <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery MenuPuncher Plugin Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href="menupuncher.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="menupuncher.js"></script>
<script type="text/javascript">
    jQuery(document).ready( function($) {
        $('#menu').menupuncher({
            color : '#000',
			textcolor  : '#FFF',
			opacity: '0.8',
			hovercolor: '#FFF'
        });     
    });

</script>
</head>

<body>
<a href="#" class="pusher"> <span></span> <span></span> <span></span> </a>
<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div id="container">
  <h1>jQuery MenuPuncher Plugin Demo</h1>
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>

     

    menupuncher.css

    /*MenuPuncher v1.0.0 for jQuery
=============
Author: Ali Beceren
Created: 2/14/2011
Date: 10/08/2014
Website: http://www.jenaldesign.com
Description: Jenal Design
*/



* {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

html,
body {
  margin: 0px;
  padding: 0px;
  font-family: 'Noto Sans', sans-serif;
}

#container {
  width: 960px;
  margin: 0 auto;
}

.pusher {
  width: 40px;
  height: 22px;
  padding: 11px;
  background-color: rgba(0, 0, 0, 0.8);
  display: block;
  position: relative;
  z-index: 100000;
}

.pusher span {
  width: 35px;
  height: 2px;
  display: block;
  background: #FFF;
  margin: 0 0 8px 0;
}

.pusher span:last-child { margin: 0; }

.pusher.click span:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 10px 0 0 0;
}

.pusher.click span:nth-of-type(2) { opacity: 0; }

.pusher.click span:nth-of-type(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: -12px 0 0 0;
}

.open {  //background-color:rgba(0, 0, 0, 0.8);
}

.floating {
  position: fixed;
  top: 0;
}

body > nav {
  backface-visibility: hidden;
  left: 0;
  overflow: hidden;
  padding-top: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  display: block;
}

body>nav .bg-cover {
  z-index: 1500;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  display: table;
}

body>nav .menupuncher {
  visibility: hidden;
  top: -10%;
  width: 100%;
  padding: 0;
  opacity: 0;
  display: table-cell !important;
  vertical-align: middle;
}

body>nav .menupuncher li {
  list-style: none;
  text-align: center
}

body>nav .menupuncher li a {
  padding: 0px;
  width: 100%;
  display: block;
  letter-spacing: -0.06em;
  color: #fff;
  text-decoration: none;
  font-size: 58.5714px;
}

body>nav .menupuncher li a:hover {
  background: #fff;
  color: #000;
}

body>nav .menupuncher li a:focus { outline: 0 }

body>nav.open { height: 100% }

body>nav.open ul {
  visibility: visible;
  opacity: 1;
}


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

#container { width: 100% !important }

body>nav .menupuncher li a { font-size: 28.5714px !important; }
}

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {

#container { width: 100% !important }

body>nav .menupuncher li a { font-size: 28.5714px !important; }
}

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
}

     

    menupuncher.js

    // MenuPuncher v1.0.0 for jQuery
// =============
// Author: Ali Beceren
// Created: 2/14/2011
// Date: 10/08/2014
// Website: http://www.jenaldesign.com
// Description: Jenal Design 

(function($) {

	$.fn.menupuncher = function(options) {
		
		$(this).addClass("menupuncher");
		
		// Settings
		var settings = $.extend({
			color  : '#000000',
			textcolor  : '#FFFFFF',
			opacity  : '0.8',
			hovercolor: '#FFF'
		}, options);
			
		if ( settings.color ) {
			var colorx = settings.color;			
		}
		if ( settings.hovercolor ) {
			var hovercolorx = settings.hovercolor;			
		}
		if ( settings.opacity ) {
			var opacityx = settings.opacity;
		}
		if ( settings.textcolor ) {
			var textcolorx = settings.textcolor;
		}
		$('.menupuncher').hide();
												
		$('.pusher').click(function() {	
		
				$('.pusher').toggleClass('click');
															
									
				if($('.pusher').hasClass('click')){
					$(".menupuncher").wrap("<nav class='open'><div class='bg-cover'></div></nav>");
					
					$("body").bind("touchmove",function(e){e.preventDefault();});
					
					$('.menupuncher').show();
					
					$('.open').css("background-color",colorx).css('opacity', opacityx);
					$('.open li a').css("color",textcolorx);
					
					$(".open a").mouseover(function() {
						$(this).css("background-color",hovercolorx);
						$(this).css("color",colorx);
					}).mouseout(function() {
						$(this).css("background-color","transparent");
						$(this).css("color",textcolorx);
					});					
					
				}else{
					$(".menupuncher").unwrap().unwrap();
					
					$("body").unbind("touchmove",function(e){e.preventDefault();});
					
					$('.menupuncher').hide();
					
				}
												
				return false;
			});
		
		$(window).scroll( function() {
			if ($(window).scrollTop() > $('body').offset().top)
				$('.pusher').addClass('floating');
			else
				$('.pusher').removeClass('floating');
		} );
					
	}
	
	return false;
		
}(jQuery));

     

    Source: http://www.jqueryscript.net/menu/Fullscreen-Perspective-Navigation-with-jQuery-and-CSS3-MenuPuncher.html

     

     

     

    The post Bootstrap toggle menu screen overlay appeared first on Cody Paste.

    ]]>     https://www.codypaste.com/404-2/feed/ 0     Images or Images and Text in Tooltips https://www.codypaste.com/images-or-images-and-text-in-tooltips/ https://www.codypaste.com/images-or-images-and-text-in-tooltips/?noamp=mobile#respond Fri, 08 Apr 2016 04:46:41 +0000 http://www.codypaste.com/?p=342     The JavaScript Tooltip is well-suited for display of images or images with text.  JavaScript ( on top ): [crayon-69ab967a4cf3f380157501/]   HTML: [crayon-69ab967a4cf4e958064693/] Download Js   Sourece: http://www.dyn-web.com/code/tooltips/image_text.php    

    The post Images or Images and Text in Tooltips appeared first on Cody Paste.

    ]]>      

     

    The JavaScript Tooltip is well-suited for display of images or images with text. 

    JavaScript ( on top ):

    <script src="dw_tooltip_c.js" type="text/javascript"></script>
<script type="text/javascript">
/* 2 functions that can be used to vary tooltip width according to image width:
dw_Tooltip.wrapImageToWidth and dw_Tooltip.wrapToWidth
See www.dyn-web.com/code/tooltips/documentation2.php#wrapFn for info */
dw_Tooltip.defaultProps = {
    //supportTouch: true, // set false by default
    wrapFn: dw_Tooltip.wrapImageToWidth
}

// Problems, errors? See http://www.dyn-web.com/tutorials/obj_lit.php#syntax

dw_Tooltip.content_vars = {
    L1: {
        img: 'images/dw-btn.gif',
        w: 80, // width of image
        h: 24 // height of image

    },
    L2: {
        img: 'images/dot-com-btn.gif',
        w: 176,
        h: 30
    },
    heading: {
        img: 'images/tooltip/our-lawyer-heading.jpg',
        w: 500,
        h: 330
    }
}

</script>

     

    HTML:

    <a href="#" class="showTip heading">Link 3</a>

    Download Js

     

    Sourece: http://www.dyn-web.com/code/tooltips/image_text.php

     

     

    The post Images or Images and Text in Tooltips appeared first on Cody Paste.

    ]]>     https://www.codypaste.com/images-or-images-and-text-in-tooltips/feed/ 0     Rotate Image on Hover https://www.codypaste.com/rotate-image-on-hover/ https://www.codypaste.com/rotate-image-on-hover/?noamp=mobile#respond Mon, 04 Apr 2016 12:23:21 +0000 http://www.codypaste.com/?p=334   Rotate social media icon / image on mouse hover: CSS: [crayon-69ab967a4dfac195306835/] HTML: [crayon-69ab967a4dfba823195814/]      

    The post Rotate Image on Hover appeared first on Cody Paste.

    ]]>      

    Rotate social media icon / image on mouse hover:

    CSS:

    .social-roll {
	background-image: url('path/to/gray/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-roll:hover {
	background-image: url('path/to/color/image.png');
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

    HTML:

    <img class="social-roll" src="/images/social-icon/fb.png" alt="logo" width="30">

     

     

     

    The post Rotate Image on Hover appeared first on Cody Paste.

    ]]>     https://www.codypaste.com/rotate-image-on-hover/feed/ 0