"ionic layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mattrothenberg/pen/ZGjwjP?depth=everything&order=popularity&page=11&q=ionic&show_forks=false" /> <style class="cp-pen-styles">html, body { height: 100%; width: 100%; } body { background: #1abc9c; height: 100vh; cursor: url("https://ionicframework.com/img/finger.png"), auto; } .iphone-container { position: relative; width: 370px; height: 80vh; margin: 10vh auto; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); } .tuck .bar.bar-transparent { z-index: 0; } .tuck .scroll-content { z-index: 999; overflow: visible; } .tuck.on .bar.bar-transparent { z-index: 999; } .tuck.on .scroll-content { z-index: 0; overflow: hidden; } .clearfix:after, .user-info .user-info-meta:after, .item .tweet-meta:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix, .user-info .user-info-meta, .item .tweet-meta { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix, * html .user-info .user-info-meta, .user-info * html .user-info-meta, * html .item .tweet-meta, .item * html .tweet-meta { height: 1%; } .clearfix, .user-info .user-info-meta, .item .tweet-meta { display: block; } /* close commented backslash hack */ .bar.bar-transparent { min-height: 45px; max-height: 125px; position: relative; background-color: #222 !important; border-bottom: 0; padding: 0; } .bar.bar-transparent .buttons .button { color: white; line-height: 100 !important; } .bar.bar-transparent .title { z-index: 9999; left: 0px !important; width: 100%; color: white; line-height: 18px; top: 3px; height: 100%; opacity: 0; overflow: hidden; -webkit-transition: all 0.45s ease-in-out; -moz-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; } .bar.bar-transparent .title.show { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .bar.bar-transparent .title.no-show { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); opacity: 0; } .bar.bar-transparent .title .tweet-count { display: block; font-size: 13px; } .header-bar-bg { background: #222 url("https://pbs.twimg.com/profile_banners/234441228/1418180666/1500x500") no-repeat center center; background-size: cover; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scroll-content { background: white; } .scroll-content.has-header { top: 125px; } .avatar { border: 2px solid white; border-radius: 3px; margin-bottom: 10px; max-width: 65px; max-height: 65px; } .avatar img { width: 100%; height: 100%; } .user-info { padding: 10px 10px 0 10px; } .user-info .user-info-name { font-size: 18px; margin-top: 0; margin-bottom: 0px; } .user-info .user-info-handle { color: #8899A6; margin-top: 0; } .user-info .user-info-description a { color: #2678B7; text-decoration: none; } .user-info .user-info-meta { color: #8899A6; } .user-info .user-info-meta .meta-item { display: inline-block; float: left; margin-right: 15px; } .user-info .user-info-meta a { color: #2678B7; text-decoration: none; } .user-info .user-info-meta i { margin-right: 10px; } .segmented-control-item { padding: 5px 10px; border-top: 0; border-color: #8899A6; } .segmented-control-item .button { border-color: #8899A6; background: white; color: #8899A6; } .segmented-control-item .button.active { box-shadow: none; background: #8899A6; color: white; } .item.item-avatar { padding: 10px 10px 10px 72px; } .item.item-avatar img { top: 10px; border-radius: 3px !important; } .item .tweet-meta { line-height: 1; margin-bottom: 5px; } .item .tweet-meta .user { float: left; font-weight: bold; margin: 0; } .item .tweet-meta .user .user-handle { font-weight: normal; color: #8899A6; } .item .tweet-meta .time { float: right; font-size: 12px; color: #8899A6; } .item .tweet-body { overflow: visible; text-overflow: initial; white-space: normal; } .item .tweet-actions i { color: #CCD6DD; padding-right: 25px; font-size: 14px; } </style></head><body> <!-- Yes this code is spaghetti, but I had Italian food for dinner, so... --> <html ng-app="starter"> <head> <meta charset="utf-8"> <title>Shrinking Header</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <script src="https://www.aliok.com.tr/post-assets/code/ion-affix-1.0.1/ion-affix.js"></script> </head> <body ng-controller="MainCtrl" ng-class="shouldTuck ? 'tuck on' : 'tuck'"> <div class="iphone-container"> <ion-pane> <ion-header-bar shrink-header bar class="bar bar-transparent" style="height: {{125 - scrollOffset}}px;"> <h1 class="title" ng-class="showSecondary ? 'show' : 'no-show'"> Matt Rothenberg <span class="tweet-count">979 Tweets</span> </h1> <div class="buttons"> <button class="button button-icon ion-search"></button> <button class="button button-icon ion-compose"></button> </div> <div class="header-bar-bg" ng-style="{'-webkit-filter': 'blur(' + blurAmount + 'px)'}"></div> </ion-header-bar> <ion-content has-bouncing="false" class="main-content" on-scroll="echoScrollPos()" ng-style="{ 'top' : adjustedOffset + 'px'}"> <div class="user-info" ng-style="{'transform': 'translateY(' + translateOffset + 'px)'}"> <div class="avatar" ng-style="{'transform': 'scale3d('+ scaleOffset + ',' + scaleOffset + ',' + scaleOffset + ')'}"> <img src="https://pbs.twimg.com/profile_images/486132305069477891/aUnjJ9LM_bigger.jpeg" alt="" /> </div> <h1 class="user-info-name">Matt Rothenberg</h1> <p class="user-info-handle">@mattrothenberg</p> <p class="user-info-description"> Designer <a target="_blank" href="http://www.pivotallabs.com">@pivotallabs</a> by day. Front-end engineer by night / Francophile / Native Louisvillain </p> <div class="user-info-meta"> <div class="meta-item"> <i class="ion-ios-location"></i><span>New York, NY</span> </div> <div class="meta-item"> <i class="ion-link"></i><span><a target="_blank" href="http://mattrothenberg.com">mattrothenberg.com</a></span> </div> </div> </div> <div class="list"> <div class="item segmented-control-item" ion-affix data-affix-within-parent-with-class="list"> <div class="button-bar"> <a href="#" class="button button-small active">Tweets</a> <a href="#" class="button button-small">Media</a> <a href="#" class="button button-small">Favorites</a> </div> </div> <div class="item item-avatar" ng-repeat="tweet in tweets"> <img src="https://pbs.twimg.com/profile_images/486132305069477891/aUnjJ9LM_400x400.jpeg"> <div class="tweet-meta"> <h4 class="user"> Matt Rothenberg {{belowThreshold}} <span class="user-handle">@mattrothenberg</span> </h4> <span class="time">{{ timeSince(tweet.created_at) }} </span> </div> <p class="tweet-body">{{ tweet.text }}</p> <div class="tweet-actions"> <i class="ion-reply"></i> <i class="ion-arrow-return-left"></i> <i class="ion-ios-star"></i> </div> </div> </div> </ion-content> </ion-pane> </div> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >// Yes this code is spaghetti, but I had Italian food for dinner, so... angular.module('starter', ['ionic', 'ion-affix']) .controller('MainCtrl', function($scope, $ionicScrollDelegate) { $scope.adjustedOffset = 125; $scope.blurAmount = 0; $scope.shouldTuck = false; $scope.showSecondary = false; $scope.translateOffset = -20; $scope.squareRatio = 55; Number.prototype.clamp = function(min, max) { return Math.min(Math.max(this, min), max); }; $scope.echoScrollPos = function() { $scope.scrollOffset = $ionicScrollDelegate.getScrollPosition().top; // Adjust blur $scope.blurAmount = ($scope.scrollOffset * .25).clamp(0, 3); $scope.translateOffset = ( $scope.translateOffset + ($scope.scrollOffset / 20)).clamp(-20, -12); // Adjust size of Avatar $scope.scaleOffset = (1 / ($scope.scrollOffset * .25)).clamp(0, 1) if ( $scope.scrollOffset > 25) { $scope.shouldTuck = true; } else { $scope.shouldTuck = false; } if ($scope.scrollOffset <= 75) { $scope.adjustedOffset = 125 - $scope.scrollOffset; } else if ($scope.scrollOffset >= 150) { $scope.showSecondary = true; } else { $scope.showSecondary = false; $scope.adjustedOffset = 45; } $scope.$apply(); } $scope.tweets = [{ "created_at": "Thu Jul 16 17:59:01 +0000 2015", "text": "TFW you realize you've spent the majority of your front-end career in #CallbackHell", }, { "created_at": "Thu Jul 16 16:17:48 +0000 2015", "text": "@alixmcalpine wow ça me donne un petit coup de nostalgie", }, { "created_at": "Thu Jul 16 16:14:11 +0000 2015", "text": "Had a nightmare last night where @angularjs 2 came out and I suddenly sucked at #javascript and I was being chased by Donald Trump and ugh ", }, { "created_at": "Tue Jul 14 13:23:45 +0000 2015", "text": "@haziqmir explosions, gunfire, and Vince Vaughn... That's about all I can discern", }, { "created_at": "Mon Jul 13 11:42:38 +0000 2015", "text": "#GetToTheChoppa\nhttps://t.co/xVDXnhWWlz", }, { "created_at": "Sun Jul 12 23:26:25 +0000 2015", "text": "#PPaaS, \"Parallel Parking as a Service\"", }, { "created_at": "Wed Jul 08 17:15:17 +0000 2015", "text": "@SlackHQ Can you recommend a way to POST message data to a @Firebase db via a custom slash command?", }, { "created_at": "Wed Jul 08 01:12:47 +0000 2015", "text": "RT @TheOnion: Insurance Only Covers Generic Heart Transplant http://t.co/jr6NtRS9Cz http://t.co/QeT7pAaFLF", }, { "created_at": "Mon Jul 06 22:41:45 +0000 2015", "text": "@missquirkygal a day in the life of a Pivot, to be sure :-)", }, { "created_at": "Mon Jul 06 22:39:57 +0000 2015", "text": "@blinkfitness Having trouble accessing my online account and local branch has been totally uncooperative. Help a member out?", }, { "created_at": "Mon Jul 06 16:41:04 +0000 2015", "text": "Swift 2\nTaylor Swift #AppleMusic controversy\n#illuminati", }, { "created_at": "Mon Jul 06 13:36:00 +0000 2015", "text": "Setting a world record today for most number of repeat listens of #BadBlood @taylorswift13", }, { "created_at": "Sat Jul 04 18:07:24 +0000 2015", "text": "Just wrote my first custom directive for @Ionicframework (swap header title on scroll, à la Twitter)\nhttp://t.co/zLxvfxlycH", }, { "created_at": "Fri Jul 03 23:04:26 +0000 2015", "text": "Is there some conspiracy behind the horrendous, #Geocities-inspired look of dog breeder websites?" }, { "created_at": "Fri Jul 03 02:13:28 +0000 2015", "text": "RT @nounproject: The peace sign originated from the two semaphore letters representing \"N\" + \"D\" meaning \"nuclear disarmament\" http://t.co/…", }] }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: