Jump to content

Photo

Had to learn some CSS3 transitions and animations stuff at work.


  • Please log in to reply
18 replies to this topic

#1 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 04 June 2013 - 11:28 PM

You can do some pretty neat shit with it.

 

I made an animated hi-liter effect over text for one thing, I'll post a tutorial on how to do it soon.


Rumors of my demise have been greatly exaggerated.


#2 The Robstar

The Robstar

    Man Child

  • Members
  • 2,068 posts
  • LocationAotearoa

Posted 05 June 2013 - 07:20 AM

Very nice bro. 

 

I usually use adobe after effects cs4 and premier to do my animation stuff. 

 

Fun isn't it?


THE HELL YOU READING FOOL???

#3 Champion of Cyrodiil

Champion of Cyrodiil

    Gigabyte

  • Members
  • 776 posts
  • LocationVirginia

Posted 05 June 2013 - 09:25 PM

my code needs flare.  i feel like i dont get much time to finish something and then its on to the next jira task.



#4 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 05 June 2013 - 10:40 PM

Very nice bro. 

 

I usually use adobe after effects cs4 and premier to do my animation stuff. 

 

Fun isn't it?

 

I use a text editor.

 

Much more fun.

 

 

my code needs flare.  i feel like i dont get much time to finish something and then its on to the next jira task.

 

As a fellow Jira monkey, I feel you. I just recently got to do something new because my most senior dev had his plate full.


Rumors of my demise have been greatly exaggerated.


#5 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 06 June 2013 - 09:25 AM

my code needs flare.  i feel like i dont get much time to finish something and then its on to the next jira task.

Grass is always greener. <.<

I've been working on a system at work with little to no direction and pretty much total creative freedom. It's nice having the power to do what you want, spend time on what you want and architect it how you want but it gets hard to keep pushing and not become demotivated with a real lack of short term goals.



#6 Champion of Cyrodiil

Champion of Cyrodiil

    Gigabyte

  • Members
  • 776 posts
  • LocationVirginia

Posted 06 June 2013 - 11:56 AM

I mostly work on server side data flow, so naturally my creativity is limited to coming up with tricksy data manipulations, rather than eye candy and ui productivity game changers.  

 

Also we are porting a legacy application from Oracle RDBMS to NOSQL Accumulo, so flare is considered gold-plating and is discouraged unless everything is done.  This is an enterprise app with a hundred or so users, so there is an endless number of requests to modify all kinds of components on the fly.

 

Also I hate working in support, so when it's time to start doing the flare, I'm already looking for a new r&d contract with some other technology.



#7 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 06 June 2013 - 12:07 PM

Our programming team is really small so I get to do full stack development. I think I would get really bored if I was stuck with just front end or just back end. x:



#8 Champion of Cyrodiil

Champion of Cyrodiil

    Gigabyte

  • Members
  • 776 posts
  • LocationVirginia

Posted 06 June 2013 - 12:14 PM

I definitely dabble in the full stack. But personally i really don't like mucking with web servers, certificates, and UI framework dependencies.  It always feels like i can blow several hours creating a data provider to a cell table or grid view... for the sole purpose of displaying the same data i could filter/query on the back end in minutes.

 

But, at the end of the day, it's the customer that is paying the bills right?



#9 Champion of Cyrodiil

Champion of Cyrodiil

    Gigabyte

  • Members
  • 776 posts
  • LocationVirginia

Posted 06 June 2013 - 12:15 PM

I don't mind updating existing UI code as much... its just building UI from scratch that i don't enjoy.  (provided the code isnt shit to begin with)



#10 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 06 June 2013 - 12:20 PM

Luckily this is a giant project so I have a mega-library I made to make all that stuff cake. I'd probably want to kill people if we were switching between languages or if I couldn't use a common library between projects.



#11 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 06 June 2013 - 02:11 PM

Luckily this is a giant project so I have a mega-library I made to make all that stuff cake. I'd probably want to kill people if we were switching between languages or if I couldn't use a common library between projects.

 

At least you're not stuck with a fragmented in-house framework that was built by two people with entirely different design methods.


Rumors of my demise have been greatly exaggerated.


#12 SpleenBeGone

SpleenBeGone

    Deer Leader of the Goriest Revolution

  • Administrators
  • 14,951 posts
  • LocationHouston

Posted 06 June 2013 - 02:26 PM

Mind giving us a nifty example?


nmjUGDL.jpg

#13 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 06 June 2013 - 04:06 PM

At least you're not stuck with a fragmented in-house framework that was built by two people with entirely different design methods.

lol. I'm sure anyone else who is ever going to use it is going to go "what the fuck was that guy smoking". I think it's just standard when you look at anyone else's code to have a significant amount of WTFs.



#14 Champion of Cyrodiil

Champion of Cyrodiil

    Gigabyte

  • Members
  • 776 posts
  • LocationVirginia

Posted 07 June 2013 - 08:47 AM

I have to work with ~60 companies on a project with over 400 people.  My data ingestion code is actually built on top of libraries provided by a competitor (whose job is to provide data ingestion mechanism for all other sub projects).  with 3 week iterations, it's always great when they tell me to update my jar dependencies to some new version the day before our demo.  Then I do and find out they changed class names or removed methods without deprecating them for an iteration first.  And if it ends up breaking all of our code, the customer considers it OUR fault, not the team that is providing data ingestion libs.  It's been such a nightmare.... or a cloudmare.



#15 Guest_ElatedOwl_*

Guest_ElatedOwl_*
  • Guests

Posted 07 June 2013 - 09:30 AM

That's one of the big reasons I've never wanted to work for a consulting place. The pay is usually really good, but the work is... well, what you described. x:



#16 Champion of Cyrodiil

Champion of Cyrodiil

    Gigabyte

  • Members
  • 776 posts
  • LocationVirginia

Posted 07 June 2013 - 10:31 AM

it is nice having some new project to work on that is completely off the realm of normal every couple of years.  but it is scary for some making sure they stay on contracts.  Im young and know what im doing with the technical aspects, so i don't have that problem yet.  once im old and crusty, i'll be screwed if i don't get into a management position by 39.



#17 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 07 June 2013 - 08:10 PM

Mind giving us a nifty example?

 

Sure, it's very little. There may be some unnecessary stuff in there, I just copied this from the repository.

 

You have to give it a background image that looks like a highlighter streak, then this just puts a white box over the element, but under the text, and animates it shrinking in width to the right over 0.7 seconds.

Elements:
<h1 class="highlighter">
   <span class="highlight-text">Stuff</span>
   <span class="highlighted"></span>
</h1>

CSS:
.highlighter {
    height:310px;
    font-size:120px;
    line-height:1.25em;
    padding-left:60px;
    position:relative;
    left:-70px;
    max-width:800px;
    background:url('../images/highlight-home.png') no-repeat;
    z-index:1;
}

.highlight-text {
    z-index:3;
    position:relative;
}

/** highlighter animation **/
.highlighted {
    height:159px;
    margin-top:0px;
    position:absolute;
    top:0; bottom:0; right:0;
    width:0%;
    display:block;
    background:white;
    -moz-animation: highlight1 0.7s linear; /* Firefox */
    -webkit-animation: highlight1 0.7s linear; /* Safari and Chrome */
    -ms-animation: highlight1 0.7s linear; /* IE10 */
    -o-animation: highlight1 0.7s linear; /* Opera */
    animation: highlight1 0.7s linear;
    z-index:2;
}
@-webkit-keyframes highlight1 { /* Chrome, Safari */
    0% {width:100%;}
    100% {width:0%;}
}
@-moz-keyframes highlight1 { /* FF */
    0% {width:100%}
    100% {width:0%}
}
@-ms-keyframes highlight1 { /* IE10 */
    0% {width:100%}
    100% {width:0%}
}
@-o-keyframes highlight1 { /* Opera */
    0% {width:100%}
    100% {width:0%}
}
@keyframes highlight1 {
    0% {width:100%}
    100% {width:0%}
}
/** end animation **/


Rumors of my demise have been greatly exaggerated.


#18 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 07 June 2013 - 08:11 PM

lol. I'm sure anyone else who is ever going to use it is going to go "what the fuck was that guy smoking". I think it's just standard when you look at anyone else's code to have a significant amount of WTFs.

 

That's what I said when I started there.

 

I work with other people's code constantly, I get that. This framework is just... whack. Luckily we're working on shaping it up into a full MVC framework over the next few months, a little bit at a time.


Rumors of my demise have been greatly exaggerated.


#19 K_N

K_N

    Megabyte

  • Members
  • 576 posts
  • LocationPhoenix

Posted 15 June 2013 - 01:49 AM

CSS3 is neat.

 

http://jsfiddle.net/SCARu/1/


Rumors of my demise have been greatly exaggerated.