Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                

<div class="container"  id="skrollr-body" data-0="background-color:rgb(0,201,147);"data-400="background-color:rgb(74,173,255);" data-1000="background-color:rgb(74,173,255);"data-1300="background-color:rgb(0,201,147);">
  <h1><i class="icon-circle-blank"></i></h1>
  <h2>CARROTS OR STICKS?</h2>
  <p>Frabbit Fitness</p>
  
  <a class="arrow" href="#anchor1"><i class="icon-sort-down"></i></a>
  </p>

<div class="section" id="sect1">
  <div class="anchor" id="anchor1"></div>
  <div id="hiddenIcon">
    <i class="icon-mobile-phone"></i>
        </div>
  <div id="phone" data-0="margin-left: -20%; opacity:0" data-350="margin-left: 10%; opacity:1">
    
    <div id="topBar">
      <p>My Placemark  <i class="icon-bookmark"></i>         </p>
       </div>
    <div id="screen"> 
      <div id="map">
        <div id="placemark"></div>
      </div><!--/ map-->  
    </div><!--/ screen-->
    </div><!--/ phone-->
  <div class="explanation" data-300="opacity: 0" data-350="opacity: 1">
  <h2>How it works</h2>
    <p>Ah'll learn thi soft southern pansy. Any rooad     soft southern pansy nobbut a lad mardy bum shu' thi gob face like a slapped arse.</p>
    <a class="arrow" href="#anchor2"><i class="icon-sort-down"></i></a>
    </div><!--/ explanation-->
  </div><!--/ sect1-->
  
  <div class="section" id="sect2">
    <div class="anchor" id="anchor2"></div>
    <div id="hiddenIcon">
    <i class="icon-twitter"></i>
        </div>
    <div id="twitter"  data-600="margin-top: -20%; opacity: 0" data-1000="margin-top: 0; opacity:1">
    <i class="icon-twitter"></i>
    </div>
    <div class="explanation" data-850=" opacity: 0" data-900=" opacity:1">
    <h2>And then Twitter</h2>
    <p>Ah'll learn thi soft southern pansy. Any rooad soft southern pansy nobbut a lad mardy bum shu' thi gob face like a slapped arse.</p>
      <a class="arrow" href="#anchor3"><i class="icon-sort-down"></i></a>
    </div><!--/ explanation-->
  </div><!--sect2-->
  
    <div class="section" id="sect3">
    <div class="anchor" id="anchor3"></div>
      <div id="hiddenIcon">
    <i class="icon-rocket icon-rotate-180"></i>
        <p></p>
        </div>
    <div class="explanation-right" data-1350=" opacity: 0" data-1400=" opacity:1">
    <h2>And then launch!</h2>
    <p>Leave your email address and we will notify you when we launch</p>
      
<!-- Begin MailChimp Signup Form -->

<div id="mc_embed_signup">
<form action="http://mapnaut.us7.list-manage.com/subscribe/post?u=169050f89a7a9edd97421276f&amp;id=8ff8ab85ce" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="me@example.com" onfocus="this.placeholder = ''" onblur="this.placeholder = 'me@example.com'" required>
  <div><input type="submit" value="Get on board" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->
    </div><!--/ explanation-->
      <div id="rocket" data-1100="margin-top:-300px; margin-right:0%; opacity: 0" data-1400="margin-top:50; margin-right:20%; opacity:1">
    <i class="icon-rocket icon-rotate-180"></i>
    </div><!--/ rocket-->
  </div><!--sect2-->
<div class="section" id="footer">
  <p> © some info and a <a href>link</a></p>
  </div>
</div><!--/ band-->

<script src="https://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js"></script>

              
            
!

CSS

              
                @import "compass/css3";

@import url('https://fonts.googleapis.com/css?family=Signika');
@import url('https://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css');
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');

html {
    font-family: 'Signika', sans-serif;
}
body{
  background: #DDD7D1;
}

#map { 
  position:absolute;
  top:0px; 
  bottom:0; 
  width:100%;
  height:2000px;
}
.placemarked{
  background: #FFC52F;
  border-color:#ffffff;
  border-width:5px;
  border-style:solid;
  height:40px;
  width:40px;
  border-radius: 25px;
  position:relative;
  top:100px;
  //left:80px;
  margin:auto;
  z-index:100;
  transition: width 1s, height 1s, transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}

.container {
    background: #00C993;
    position: absolute;
    display: block;
    width: 100%;
    //z-index:100;
    height: 2050px;
    color: white;
    text-align: center; 
    min-width: 24px;
}

.section{
position:absolute;
  display:block;
  width:100%;
  //top:400px;
  //margin: auto;
  //z-index:100;
  color:white;
  text-align: left; 
  //padding-left: 3em;
}

#sect1 { 
  top:400px;
}
#sect2 {
  top:1000px;
}
#sect3 {
  top:1500px;
}
#footer {
  top:2050px;
  //background:#DDD7D1;
  //margin:auto;
  height:50px;
  text-align:center;
}

#twitter{
  float:left;
  width: 20%;
  font-size:5em;
  padding-left:15%;
  //padding-right:10%;
}
#rocket{
  float:right;
  width: 20%;
  font-size:5em;
  padding-left:15%;
  //padding-right:10%;
}
#hiddenIcon{
  text-align:center;
  visibility:hidden;
  height:0;
  //float:none;
  //width: 100%;
  font-size:5em;
  //padding-left:15%;
  //padding-right:10%;
}

.anchor{
height:100px;
//margin-top:100px;
}

band2 h2{
text-align: left;
    
}
.explanation {
  min-width: 12.42em;
  float:left;
  //padding-top:5%;
  width:40%;
  //display:block;
}
.explanation-right {
  min-width: 12.42em;
  float:left;
  text-align:right;
  padding-left:5%;
  width:40%;
}

#phone {
    background: #DDD7D1;
    border-radius: 30px;
    box-shadow: 0 0.5em 0 #BCB1A5;
    
    padding: 50px 18px 50px 18px;
    width: 20%;
    min-width:200px;
    max-width:400px;
    margin-right:5%;
    float:left;
}
#screen {
    background: #ffffff;
    height: 300px;
    overflow: hidden;
    padding: 0;
    position: relative;
    min-width:200px;
}

#topBar {
    background: #00C993;
    height: 10%;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    min-width:100px;
}
#mc_embed_signup{
  text-align:right;
  background-color: #00C993;
}
#mce-EMAIL{
  text-align:right;
  width:auto;
  height:30px;  
  margin-bottom:20px;
  padding-right:1em;
  border-style:none;
  outline: none;
}
#mce-EMAIL:focus {
    outline: none;
  
}
#mc-embedded-subscribe{
  border-style:none;
}

.icon-bookmark{float:right;}
.icon-bookmark:hover {color: #FFC52F;}
.pressed{color: #FFC52F;}

h1, h3 {
    font-family: 'Signika', sans-serif;
    font-weight: 700;
    text-align: center;
}
.container h1 {
    font-size: 5em;
    line-height: 1em;
    /*margin-bottom: 1em;*/
}

a {
color: white;
}
.button {
    background: #DDD7D1;
    text-align: center;
    padding: .5em 1em;
    color: white;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0.2em 0 #BCB1A5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /*transition cross-browser stuff*/
    -webkit-transition: background 0.2s ease-out;  /* Safari 3.2+, Chrome */
    -moz-transition: background 0.2s ease-out;  /* Firefox 4-15 */
    -o-transition: background 0.2s ease-out;  /* Opera 10.5–12.00 */
    transition: background 0.2s ease-out;  /* Firefox 16+, Opera 12.50+ */
}
.button:hover {
    background: #BCB1A5;
}
a.arrow{
  color: white;
  text-align: center;
  font-size: 3em;
  //display:block;
  //width:100%;
  //float:none;
  text-decoration: none;
  padding-bottom:30px;
  /*transition cross-browser stuff*/
  -webkit-transition: color 0.2s ease-out;  /* Safari 3.2+, Chrome */
  -moz-transition: color 0.2s ease-out;  /* Firefox 4-15 */
  -o-transition: color 0.2s ease-out;  /* Opera 10.5–12.00 */
   transition: color 0.2s ease-out;  /* Firefox 16+, Opera 12.50+ */
}
a.arrow:hover {color: #FFC52F;}

@media only screen and (min-width: 767px) {
  //#phone {float:left;}
  body {
        font-size: 1.125em; /* 18px / 16px */
        
        //line-height: 1.7em;
    }
    .container {
        background-size: 100%;
    }
    .container h1 {
        font-size: 3.25em; /*52 / 16*/
    }
    a.button {
        padding: .75em 1.5em;
    }
}
@media only screen and (max-width: 550px) {
  .explanation{float:none;margin:auto; text-align:center;}
  .explanation-right{float:none;margin:auto; text-align:center;}
  #sect1{top:350px;}
  #phone{visibility:hidden; height: 0px; width:0px; padding:0;margin:0;}
  #map{width:0px;height:0px;}
  #sect2{top:900px;}
  //#twitter{float:none;margin:auto;padding-left:0em;}
  #rocket{visibility:hidden;}
  #twitter{visibility:hidden;padding-left:0em;}
  #hiddenIcon{visibility:visible;height:auto;}
  #mce-EMAIL{text-align:center;padding:0;float:none;}
  #mc_embed_signup{text-align:center;}
  
}
              
            
!

JS

              
                skrollr.init({
    forceHeight: false
});


var map = L.mapbox.map('map', 'damianogui.map-z5jfdn50', {zoomControl: false})

    .setView([46.06331,11.12492], 17);

var geoJson = [{
  "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [11.12353, 46.06371]
    },
    "properties": {
        "title": "Round Gray Marker",
        "icon": {
            "iconUrl": "https://photos-1.dropbox.com/t/0/AAA1hRVpbBp1ASS77gMv6_cLGuwWIZwB0ONQh90ryfS22A/12/4475527/png/1024x768/3/1379422800/0/2/CircleMarkerTest2.png/RJxgHtazP5yaj1vayQW_AuzgQCtXnHRXZk9FL6GaBE4",
            "iconSize": [56, 56], // size of the icon
            "iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
            //"popupAnchor": [0, -25],  // point from which the popup should open relative to the iconAnchor
        }
    }
}];

// Set a custom icon on each marker based on feature properties
map.markerLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;

    marker.setIcon(L.icon(feature.properties.icon));
});

// Add features to the map
//map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();

/*!
 * Plugin for skrollr.
 * This plugin makes hashlinks scroll nicely to their target position.
 *
 * Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr
 *
 * Free to use under terms of MIT license
 */
(function(document, window) {
	'use strict';

	var DEFAULT_DURATION = 500;
	var DEFAULT_EASING = 'sqrt';

	var MENU_TOP_ATTR = 'data-menu-top';
	var MENU_OFFSET_ATTR = 'data-menu-offset';

	var skrollr = window.skrollr;
	var history = window.history;
	var supportsHistory = !!history.pushState;

	/*
		Since we are using event bubbling, the element that has been clicked
		might not acutally be the link but a child.
	*/
	var findParentLink = function(element) {
		//Yay, it's a link!
		if(element.tagName === 'A') {
			return element;
		}

		//We reached the top, no link found.
		if(element === document) {
			return false;
		}

		//Maybe the parent is a link.
		return findParentLink(element.parentNode);
	};

	/*
		Handle the click event on the document.
	*/
	var handleClick = function(e) {
		//Only handle left click.
		if((e.which || e.button) !== 1) {
			return;
		}

		var link = findParentLink(e.target);

		//The click did not happen inside a link.
		if(!link) {
			return;
		}

		if(handleLink(link)) {
			e.preventDefault();
		}
	};

	/*
		Handles the click on a link. May be called without an actual click event.
		When the fake flag is set, the link won't change the url and the position won't be animated.
	*/
	var handleLink = function(link, fake) {
		//Don't use the href property (link.href) because it contains the absolute url.
		var href = link.getAttribute('href');

		//Check if it's a hashlink.
		if(!/^#/.test(href)) {
			return false;
		}

		//Now get the targetTop to scroll to.
		var targetTop;

		//If there's a data-menu-top attribute, it overrides the actuall anchor offset.
		var menuTop = link.getAttribute(MENU_TOP_ATTR);

		if(menuTop !== null) {
			targetTop = +menuTop;
		} else {
			var scrollTarget = document.getElementById(href.substr(1));

			//Ignore the click if no target is found.
			if(!scrollTarget) {
				return false;
			}

			targetTop = _skrollrInstance.relativeToAbsolute(scrollTarget, 'top', 'top');

			var menuOffset = scrollTarget.getAttribute(MENU_OFFSET_ATTR);

			if(menuOffset !== null) {
				targetTop += +menuOffset;
			}
		}

		if(supportsHistory && !fake) {
			history.pushState({top: targetTop}, '', href);
		}

		//Now finally scroll there.
		if(_animate && !fake) {
			_skrollrInstance.animateTo(targetTop, {
				duration: _duration(_skrollrInstance.getScrollTop(), targetTop),
				easing: _easing
			});
		} else {
			defer(function() {
				_skrollrInstance.setScrollTop(targetTop);
			});
		}

		return true;
	};

	var defer = function(fn) {
		window.setTimeout(fn, 1);
	};

	/*
		Global menu function accessible through window.skrollr.menu.init.
	*/
	skrollr.menu = {};
	skrollr.menu.init = function(skrollrInstance, options) {
		_skrollrInstance = skrollrInstance;

		options = options || {};

		_easing = options.easing || DEFAULT_EASING;
		_animate = options.animate !== false;
		_duration = options.duration || DEFAULT_DURATION;

		if(typeof _duration === 'number') {
			_duration = (function(duration) {
				return function() {
					return duration;
				};
			}(_duration));
		}

		//Use event bubbling and attach a single listener to the document.
		skrollr.addEvent(document, 'click', handleClick);

		if(supportsHistory) {
			window.addEventListener('popstate', function(e) {
				var state = e.state || {};
				var top = state.top || 0;

				defer(function() {
					_skrollrInstance.setScrollTop(top);
				});
			}, false);
		}
	};

	//Private reference to the initialized skrollr.
	var _skrollrInstance;

	var _easing;
	var _duration;
	var _animate;

	//In case the page was opened with a hash, prevent jumping to it.
	//http://stackoverflow.com/questions/3659072/jquery-disable-anchor-jump-when-loading-a-page
	defer(function() {
		if(window.location.hash) {
			window.scrollTo(0, 0);

			if(document.querySelector) {
				var link = document.querySelector('a[href="' + window.location.hash + '"]');

				if(link) {
					handleLink(link, true);
				}
			}
		}
	});
}(document, window));

var s = skrollr.init(/*other stuff*/);

//The options (second parameter) are all optional. The values shown are the default values.
skrollr.menu.init(s, {
    //skrollr will smoothly animate to the new position using `animateTo`.
    animate: true,

    //The easing function to use.
    easing: 'sqrt',

    //How long the animation should take in ms.
    duration: function(currentTop, targetTop) {
        //By default, the duration is hardcoded at 500ms.
        return 1000;

        //But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
        //return Math.abs(currentTop - targetTop) * 10;
    },
});

$(".icon-bookmark").click(function(){
    $("#placemark").addClass("placemarked");
    $(".icon-bookmark").addClass("pressed");
});


              
            
!
999px

Console