Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
​
    <div id="my-slider" class="blur-slider">
        <div class="slider-images">
            <img src="https://lh6.googleusercontent.com/-0pn_MBgVvCc/URkFkHDgb8I/AAAAAAAAB98/vg7CE1rz6pA/s1500/photo-blur.png" height="331" width="1500" alt="" class="image-blur">
            <img src="https://lh4.googleusercontent.com/-X5o6fxh2tRY/URkFkNBqvfI/AAAAAAAAB98/y85O_FTNIJQ/s1500/photo.png" height="331" width="1500" alt="">
        </div>
    </div>
    <div class="control">
        <div class="buttons">
            <button data-index="0">0</button>
            <button data-index="1">1</button>
            <button data-index="2">2</button>
        </div>
        <div class="config">
            <label>
                Duration : 
                <input name="duration" type="text" size="3" value="300" />
            </label>
            <label>
                Easing : 
                <select name="easing">
                    <option value="swing">swing</option>
                    <option value="linear">linear</option>
                    <option value="easeInQuad">easeInQuad</option>
                    <option value="easeOutQuad">easeOutQuad</option>
                    <option value="easeInOutQuad">easeInOutQuad</option>
                    <option value="easeInCubic">easeInCubic</option>
                    <option value="easeOutCubic">easeOutCubic</option>
                    <option value="easeInOutCubic">easeInOutCubic</option>
                    <option value="easeInQuart">easeInQuart</option>
                    <option value="easeOutQuart">easeOutQuart</option>
                    <option value="easeInOutQuart">easeInOutQuart</option>
                    <option value="easeInQuint">easeInQuint</option>
                    <option value="easeOutQuint">easeOutQuint</option>
                    <option value="easeInOutQuint">easeInOutQuint</option>
                    <option value="easeInExpo">easeInExpo</option>
                    <option value="easeOutExpo">easeOutExpo</option>
                    <option value="easeInOutExpo">easeInOutExpo</option>
                    <option value="easeInSine">easeInSine</option>
                    <option value="easeOutSine">easeOutSine</option>
                    <option value="easeInOutSine">easeInOutSine</option>
                    <option value="easeInCirc">easeInCirc</option>
                    <option value="easeOutCirc">easeOutCirc</option>
                    <option value="easeInOutCirc">easeInOutCirc</option>
                    <option value="easeInElastic">easeInElastic</option>
                    <option value="easeOutElastic">easeOutElastic</option>
                    <option value="easeInOutElastic">easeInOutElastic</option>
                    <option value="easeInBack">easeInBack</option>
                    <option value="easeOutBack">easeOutBack</option>
                    <option value="easeInOutBack">easeInOutBack</option>
                    <option value="easeInBounce">easeInBounce</option>
                    <option value="easeOutBounce">easeOutBounce</option>
                    <option value="easeInOutBounce">easeInOutBounce</option>
                </select>
            </label>
        </div>
    </div>
  
  
</body>
</html>
​
 
body {
  background-color: #222;
  padding: 50px 0;
}
.blur-slider {
  position: relative;
  width: 500px;
  height: 331px;
  border: 2px solid #fff;
  margin: 0 auto;
  overflow: hidden;
}
.blur-slider .slider-images {
  position: absolute;
  left: 0;
  top: 0;
}
.blur-slider .slider-images .image-blur {
  position: absolute;
  opacity: 0;
  filter: alpha(opactiy=0);
}
.control {
  color: #fff;
  font-size: 13px;
  width: 500px;
  margin: 10px auto;
}
.control .buttons {
  margin: 10px 0;
  text-align: center;
}
.control .buttons button {
  padding: 2px 8px;
}
.control .config {
  text-align: center;
}
.control .config label {
  margin: 0 1em;
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mach3sspro
0viewers