Permalink
Browse files

some css animation

  • Loading branch information...
1 parent 456bbe1 commit 7d3202c6d3ee198ba3f1c48ac36faa5a4df18cd4 @rodbeh committed Feb 4, 2014
Showing with 71 additions and 10 deletions.
  1. +59 −5 public/css/main.css
  2. +7 −4 views/home.erb
  3. +5 −1 views/layout.erb
View
@@ -262,7 +262,7 @@ section {
}
p {
display: inline;
- margin-left: -40px
+ margin-left: -40px
}
h2 + p {
margin-left: 0
@@ -338,7 +338,7 @@ section {
}
p {
display: block;
- margin-left: 0
+ margin-left: 0
}
header span {
width: 150px;
@@ -370,7 +370,7 @@ section {
background-image: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/drawings-background.jpg");
}
header span span:hover {
- opacity: 0.2
+ opacity: 0.2
}
header span {
width: 200px;
@@ -382,11 +382,65 @@ section {
height: 200px;
background-size: 150px;
background-position-y: 36px
- }
+ }
+ p.sideshow {
+ display: none
+ }
+ p span {
+ display: none
+ }
+ span.sideshow {
+ display: inline
+ }
+ #sideshow {
+ text-decoration: underline
+ }
+ #sideshow:hover {
+ cursor: pointer;
+ text-decoration: line-through;
+ color: rgba(243,74,41,1)
+ }
+ #sideshow.sideshow {
+ text-decoration: none
+ }
+ #sideshow.sideshow:hover {
+ cursor: default;
+ text-decoration: none;
+ color: black
+ }
+ #sideshow.sideshow ~ span + span {
+ display: inline
+ }
+ p.top {
+ margin-top: 0.75em
+ }
+ p.bottom {
+ margin-bottom: 0.75em
+ }
+ @keyframes myfirst {
+ from {
+ color: red
+ }
+ to {
+ color: white
+ }
+ }
+ @-webkit-keyframes myfirst {
+ from {
+ color: red
+ }
+ to {
+ color: white
+ }
+ }
+ span b {
+ animation: myfirst 1s linear 0s infinite;
+ -webkit-animation: myfirst 1s linear 0s infinite;
+ }
}
@media only screen and (max-width: 1024px) {
header span span:hover {
- opacity: 0.1
+ opacity: 0.1
}
header span span a {
display: none
View
@@ -15,20 +15,23 @@
<p><mark>I bridge together the users and the <i>Back-End</i></mark>.</p>
<p>I live and breathe interaction. I design icons, draw out
<i>paper prototypes</i>, and program in <i>Ruby</i> for fun.</p>
- <p><mark>I build prototypes just for the buzz of seeing people
+ <p class="sideshow top"><mark>I build prototypes just for the buzz of seeing people
react to using them</mark>. I love reading <i>Gladwell</i>, and
watching <i>Johnathan Ive</i> and <i>Dieter Rams</i> unearthing
the close relationship between manufactured objects
and their creators. I am dedicated to writing ever
better and more clearly marked-up, more readable
<i>HTML5</i>, <i>CSS3</i>, <i>JavaScript</i>… and <i>Ruby</i>, <i>Haml</i>, <i>Sass</i> code.</p>
- <p><mark>I realise the impossibility of the notion of perfect code,
+ <p class="sideshow bottom"><mark>I realise the impossibility of the notion of perfect code,
but I strive for it anyway</mark>. I'm a fan of <i>jQuery</i>, <i>Agile</i> and
<i>Scrum</i>. The <i>GitHub</i> completely transformed my way of
- working.</span> I'm at ease working with other developers,
+ working. I'm at ease working with other developers,
clients, marketing, and with other departments.</p>
<p><mark>I love the stimulation my work provides for both sides
- of my mind</mark>… <strong class="block"> – <i>I really <em>really</em> love my work</i>!!</strong></p>
+ of my mind</mark>… <strong class="block"> – <i id="sideshow" >I really <em>really</em> love my work</i>
+ <span class="sideshow"> <b>»</b></span>
+ <span>!!</span>
+ </strong></p>
</section>
<section>
<p>
View
@@ -36,7 +36,11 @@
if (window.location.hash === "#content")
return $(window).scrollTop(r), e()
})
- })()
+ })();
+ $( "html").on( "click", function() {
+ $(".sideshow").fadeIn().removeClass("sideshow");
+ $("#sideshow").fadeIn().addClass("sideshow");
+ });
</script>
<link href='http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<meta name="description" content="You might call me a Front-End, UX, or Interaction designer. I bridge together the users and the Back-End. I really love my work !!" >

0 comments on commit 7d3202c

Please sign in to comment.